Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page.

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top" (hehe), "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full-width and bottom aligned.

Basic

Hover on desktop or touch me on mobile!

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">Hover on desktop or touch me on mobile!</span>

Advanced

Additional classes can be added to change behavior and appearance.

On the left

<span data-tooltip class="has-tip tip-left" title="Tooltips are awesome, you should totally use them!">On the left</span>

On the right

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

On the bottom

<span data-tooltip class="has-tip tip-bottom" title="Tooltips are awesome, you should totally use them!">On the bottom</span>

On the top

<span data-tooltip class="has-tip tip-top" title="Tooltips are awesome, you should totally use them!">On the top</span>

Custom width

<span data-tooltip data-width="100px" class="has-tip" title="Tooltips are awesome, you should totally use them!">Custom width</span>

Color Palette

You can use any of the Sonos product colors with the tooltip.

.alt tooltip class

<span data-tooltip class="has-tip alt" title="Tooltips are awesome, you should totally use them!">.alt tooltip class</span>

.play1 tooltip class

<span data-tooltip class="has-tip play1" title="Tooltips are awesome, you should totally use them!">.play1 tooltip class</span>

.play3 tooltip class

<span data-tooltip class="has-tip play3" title="Tooltips are awesome, you should totally use them!">.play3 tooltip class</span>

.play5 tooltip class

<span data-tooltip class="has-tip play5" title="Tooltips are awesome, you should totally use them!">.play5 tooltip class</span>

.playbar tooltip class

<span data-tooltip class="has-tip playbar" title="Tooltips are awesome, you should totally use them!">.playbar tooltip class</span>

.sub tooltip class

<span data-tooltip class="has-tip sub" title="Tooltips are awesome, you should totally use them!">.sub tooltip class</span>

.connect-amp tooltip class

<span data-tooltip class="has-tip connect-amp" title="Tooltips are awesome, you should totally use them!">.connect-amp tooltip class</span>

.connect tooltip class

<span data-tooltip class="has-tip connect" title="Tooltips are awesome, you should totally use them!">.connect tooltip class</span>

.light tooltip class

<span data-tooltip class="has-tip light" title="Tooltips are awesome, you should totally use them!">.light tooltip class</span>

.dark tooltip class

<span data-tooltip class="has-tip dark" title="Tooltips are awesome, you should totally use them!">.dark tooltip class</span>

.amber tooltip class

<span data-tooltip class="has-tip amber" title="Tooltips are awesome, you should totally use them!">.amber tooltip class</span>