Custom Ai Tooltip popup help

[Curtis]

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

Open

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.

[Jeff_Hager]

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.

[Curtis]

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.

[MaximeBaker]

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;
}

[Curtis]

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

[ThinhDinh]

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

[Jeff_Hager]

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

[MaximeBaker]

Yes

[Jeff_Hager]

Good to know!