Menu icon Foundation
Dropdown Pane as "cool-tip"

Hi Zurb,
Hi Reards,

I have added some dropdown panes, using them as a tooltip. As the tooltip can't hold HTML (like videos, images, styled contents,...). As far as I know, this is what Zurb recommend to us if we want cooler tooltips.

 

But to use the dropdown pane as a real cool-tip (cause it's gonna be way cooler than a tooltip lol) I need to place it center top or center bottom. But looking at: http://foundation.zurb.com/sites/docs/dropdown.html it seems that we can only positionate it around the corners (upper left, upper right, lower left, lower right).

 

Is there any solution to get the Dropdown pane centered? I tried so many things and don't want to change the default scripts.... :/

Hope you yetis got a smart answer for me. thank you!

 

dropdowntooltipalign-centercentered

Hi Zurb,
Hi Reards,

I have added some dropdown panes, using them as a tooltip. As the tooltip can't hold HTML (like videos, images, styled contents,...). As far as I know, this is what Zurb recommend to us if we want cooler tooltips.

 

But to use the dropdown pane as a real cool-tip (cause it's gonna be way cooler than a tooltip lol) I need to place it center top or center bottom. But looking at: http://foundation.zurb.com/sites/docs/dropdown.html it seems that we can only positionate it around the corners (upper left, upper right, lower left, lower right).

 

Is there any solution to get the Dropdown pane centered? I tried so many things and don't want to change the default scripts.... :/

Hope you yetis got a smart answer for me. thank you!

 

Rafi Benkual about 3 years ago

Hi Fabian,

That sounds like a cool modification! Have any examples of a cool tip?

The dropdown isn't made for that purpose but I'm sure with a bit of CSS it can be made to do that.

Fabian about 3 years ago

Hi Rafi,

 

please see the following two examples - the first is a youtube video (placeholder right now), which will play on hover. The second is an expanded row with a subline. The subline can be linked or can open a tooltip with product infos. 

Right now the tooltips are aligned to the upper left corner. The should be centered above and (thats important too) they should change the direction. So if I set them to open on the upper corner, it shouldn't be shown below the element if the paged is scrolled (right now, if the space to the upper end of window is too small it will show the tooltip below the trigger instead of above.)

I am really looking forward to your reply! All the best

example 1: Hero image with a youTube Video as Tooltip caption expanded row with subline and tooltip