# Custom Ai Tooltip popup help

**URL:** <https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219>\
**Category:** Ask for Help\
**Created:** [February 21, 2025, 1:35pm UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219 "2025-02-21T13:35:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\
**Post date:** [February 21, 2025, 1:35pm UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/1 "2025-02-21T13:35:30Z")

</div>

I’ve created a Tooltip popup box using the custom ai component but when the popup is displayed it moves the below content down rather than displaying on top of it. I’ve tried a couple of things including instructing the custom ai component to use z-index and make overflow visible but nothings worked. Also the shadow is cut off at the bottom.  
Any ideas?

Closed

 ![Screenshot 2025-02-21 at 13.31.21](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/f/2f87c7d8139a0f6859513207ae8c6b5070ff6c93.png)

Open

 ![Screenshot 2025-02-21 at 13.31.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/f/bfd6dbc1f22d6409af9ec81f85b30a2812d2bd93.png)

Also custom ai components always seem to have a lot of padding so aren’t inline with other elements. Again I’ve tried instructing it to set padding-left to 0px etc but nothing seems to work.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 21, 2025, 2:02pm UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/2 "2025-02-21T14:02:58Z")

</div>

Custom AI components are iframed web pages that are sandboxed from the rest of the components on the screen. It’s like a window, and you can’t see beyond the edges of that window. Everything moves down because the window has to become larger to show all of the content.

---

<div class="post-metadata">

**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\
**Post date:** [February 21, 2025, 2:04pm UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/3 "2025-02-21T14:04:53Z")

</div>

Thanks Jeff.

Guess this will have to do until we get Tooltips everywhere in glide.  
Alternatively I could integrate the below content into the sample Ai component.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 21, 2025, 3:20pm UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/4 "2025-02-21T15:20:31Z")

</div>

It is possible! Add a class name to the AI Component in the Option tab and add this custom CSS:

```css
.outside-hack {
position:absolute;
/* optionally, add the height, margin, padding and any other property you need here. */
height:20px;
}

```

---

<div class="post-metadata">

**Author:** ![Curtis](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/curtis/32/59826_2.png) [@Curtis](https://community.glideapps.com/u/Curtis)\
**Post date:** [February 21, 2025, 4:40pm UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/5 "2025-02-21T16:40:03Z")

</div>

We’re on legacy pro so don’t think we can use custom CSS. Although they added it to legacy business, so maybe it will come to legacy pro soon? @NoCodeAndy

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 22, 2025, 12:57am UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/6 "2025-02-22T00:57:14Z")

</div>

What triggers the pop-up? I assume a hover on something?

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 22, 2025, 1:33am UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/7 "2025-02-22T01:33:42Z")

</div>

@MaximeBaker does that allow the tooltip popup to extend outside the bounds of the iframe?

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [February 22, 2025, 1:43am UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/8 "2025-02-22T01:43:05Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 22, 2025, 1:49am UTC](https://community.glideapps.com/t/custom-ai-tooltip-popup-help/80219/9 "2025-02-22T01:49:49Z")

</div>

Good to know!