Tooltip

‹ Back

Basic Tooltip

To implement a basic tooltip, all you need is a data-tooltip attribute on your anchor, and a div with a matching data-tooltip-for attribute.

This is my anchor
This is my tooltip.
<span class="tooltip" data-tooltip="tooltip-1">This is my anchor</span>
<div class="tooltip--hide" data-tooltip-for="tooltip-1">
  This is my tooltip.
</div>

The .tooltip--hide class is a helper class that hides the tooltip's content from being displayed on the page.

Tooltips will automatically reposition themselves if they run out of room:

Simple Tooltip
Tooltip
Standard tooltip pulls to the left when there's no room on the right. Will move up when there's no room underneath.
<div class="align-right">
  <span class="tooltip" data-tooltip="tooltip-2">Simple Tooltip</span>
  <div class="tooltip--hide" data-tooltip-for="tooltip-2">
    <strong>Tooltip</strong><br />
    Standard tooltip pulls to the left when there's no room on the right. Will move up when there's no room underneath.
  </div>
</div>

Toggle and Follow Mouse Options

You can make tooltips togglable by adding the data-tooltip-toggle attribute:

Toggle Tooltip
Toggle Tooltip
This tooltip will toggle on and off with a click.
<span class="tooltip" data-tooltip="tooltip-3" data-tooltip-toggle>Toggle Tooltip</span>
<div class="tooltip--hide" data-tooltip-for="tooltip-3">
  <strong>Toggle Tooltip</strong><br />
  This tooltip will toggle on and off with a click.
</div>

To make a tooltip follow the mouse, you likewise need to add in the data-tooltip-follow attribute.

Follow Mouse. This is a really long anchor so you can see how it moves around based on viewport contraints.

Tooltip
This tooltip follows the mouse.

<p>
  <span class="tooltip" data-tooltip="tooltip-4" data-tooltip-follow>Follow Mouse. This is a really long anchor so you can see how it moves around based on viewport contraints.</span>
  <div class="tooltip--hide" data-tooltip-for="tooltip-4">
    <strong>Tooltip</strong><br />
    This tooltip follows the mouse.
  </div>
</p>

Custom positioning

You can pass in a custom position as a data-position attribute. The attribute takes two values, one for the tooltip and one for the arrow.

Available tooltip positions are top, left, right, bottom.
Available arrow positions are top, left, middle, right, bottom.

The tooltip position is where the tooltip appears in relation to the anchor. The arrow position is where the arrow appears in relation to the tooltip. Here are some examples to illustrate the feature:

Tooltip
This a tooltip that is custom positioned.
Top left Top middle Top right Bottom left Bottom middle Bottom right
Right top Right middle Right bottom Left top Left middle Left bottom


Without repositioning

If you always want a tooltip to show in one specific position you can add another data attribute: data-tooltip-static. This will prevent the tooltip from repositioning based on viewport constraints.


Auto-show

Adding the data-tooltip-show attribute will make the tooltip appear always-on.

This is an anchor
This tooltip is always on.
<span class="tooltip" data-tooltip="tooltip-show" data-tooltip-show data-tooltip-position="right middle" data-tooltip-static>This is an anchor</span>
<div class="tooltip--hide" data-tooltip-for="tooltip-show">
  This tooltip is always on.
</div>

data-tooltip-show can be combined with data-tooltip-toggle to create a toggle tooltip that defaults to visible.

Toggle anchor
This is my tooltip.
<span class="tooltip" data-tooltip="tooltip-show-2" data-tooltip-show data-tooltip-toggle data-tooltip-position="right middle" data-tooltip-static>Toggle anchor</span>
<div class="tooltip--hide" data-tooltip-for="tooltip-show-2">
  This is my tooltip.
</div>

Global over-rides

There are some global settings in the tooltip.js file that you can hard-code to over-ride on a global basis:

var defaultPosition   = "right top"
var followMouse       = false;
var toggleTooltips    = false;

Changing these settings will over-ride all tooltips without having to add in the required data attributes.