Custom Ai Tooltip popup help

Ask for Help
1

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
Screenshot 2025-02-21 at 13.31.211438×564 77 KB

Open

Screenshot 2025-02-21 at 13.31.32
Screenshot 2025-02-21 at 13.31.321430×736 92.5 KB

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.

2

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.

3

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.

4

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

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

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

6

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

7

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

8

Yes

9

Good to know!