Menu icon Foundation
Tooltip width

How would I change the width of the tooltips? I saw an older post about adding data-width to the element, but that didn't work. Is there an option to do this?

 

Thanks!

tooltips

How would I change the width of the tooltips? I saw an older post about adding data-width to the element, but that didn't work. Is there an option to do this?

 

Thanks!

Rafi Benkual almost 3 years ago

@rober - Totally hear you. It would be great if you can add a feature request for a tooltip width variable on GitHub. https://github.com/zurb/foundation

Looks like it is a max-width setting that can made into a variable:

https://github.com/zurb/foundation-sites/blob/develop/scss/components/_tooltip.scss#L59

Also even better if the tooltip variables can be used in a mixin.

Robert North almost 3 years ago

This is a bit annoying. Should be simple to change the width of this. Why add scss variables for changing the PIP size but not the overall width of the tip? 

Unfortunately setting max-width for .tooltip has no effect on my end. I had to set width as well: 

.tooltip {
    max-width: rem-calc(300px) !important;
    width: rem-calc(300px);
}

Thomas Venturini almost 3 years ago

Overwrite the max-width value of the tooltip and you are good to go.

.tooltip {
    max-width: rem-calc(300px) !important;
}

Shawn Jones almost 3 years ago

Any more ideas on this? I really want the tootltips to be wider.

Shawn Jones almost 3 years ago

 

I want to make them slightly wider.

 

Here is the page, scroll down to the upcoming section and hover over the pictures.

http://kingswaychurch.fishhookcms.com/

Rafi Benkual almost 3 years ago

Hi Shawn,

The tooltips are set to be width auto but have a max-width on them so they don't cover the screen. What is the design problem you are solving so we can guide you better?