Menu icon Foundation
Styling Tooltips

Is it possible to style the tooltips? I would love to change the background color, but can't find a variable or a way to overwrite the default styling.

Any suggestions?

tooltips

Is it possible to style the tooltips? I would love to change the background color, but can't find a variable or a way to overwrite the default styling.

Any suggestions?

Rafi Benkual over 5 years ago

This should help: http://gyazo.com/b72ac0edca65c2883674854f3351fc75

Line 1151 in _settings.scss

Jeremy Englert over 5 years ago

Well, I feel dumb now.

What about the width of the tooltip, is that controllable?

Matt Camp over 5 years ago

Jeremy try data-width"200"

It should look something like this:

<span data-tooltip class="has-tip tip-right" data-width="200" title="Tooltips are awesome, you should totally use them!">extended information</span>

Alex Hudson about 5 years ago

What if you want to add a style to the tooltip hover (for instance I don't see a default setting for box-shadow). I'd like to add one but can't figure out how to select the hover itself.

Rafi Benkual about 5 years ago

.has-top is the selector for the element the tip is attached to
.tooltip is the selector for the tooltip

Here is an example http://codepen.io/rafibomb/pen/buskG

David Mcdonald about 4 years ago

Note, in the _tooltips.scss file there is a max tooltip width setting that looks like

$tooltip-max-width: 300px !default;

So if you want large tooltips you will either need to change this setting or override it with some custom css

Seppe Clijsters 10 months ago

Is it possible to extra content in the title attribute? Like the image below.

I w

 

<span data-tooltip class="has-tip" title="<div class='foo'>Tooltips are awesome, you should totally use them!</div>">extended information</span>