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 almost 5 years ago

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

Line 1151 in _settings.scss

Jeremy Englert almost 5 years ago

Well, I feel dumb now.

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

Matt Camp almost 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 over 4 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 over 4 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 over 3 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 3 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>