Tooltip

Pure CSS based tooltips.

A few things to keep in mind when using CSS tooltips:

Tooltips make use of pseudo-elements, so self-closing elements such as <img>, <input> and <hr> will not render tooltips.
If pseudo elements are already in use on an element, the tooltip will conflict with them resulting in potential bugs.
Tooltips set the element to position: relative; and use absolute positioning to position itself.
Tooltips can’t display images or html content as it’s value is defined by a data-attribute.

Hover over me!

Tooltip Positioning

For positioning, use the data-tooltip-pos data attribute with a value of left, right, or bottom.

Top by default lorem

Left

Right

Bottom

<div class="o-grid  o-grid--autoFit">
  <div class="o-grid-cell">
    <a href="#" data-tooltip="Whats up, Alex?!">Top by default lorem</a>
  </div>

  <div class="o-grid-cell">
    <a href="#" data-tooltip="Whats up, Alex?!" data-tooltip-pos="left">Left</a>
  </div>

  <div class="o-grid-cell">
    <a href="#" data-tooltip="Whats up, Alex?!" data-tooltip-pos="right">Right</a>
  </div>

  <div class="o-grid-cell">
    <a href="#" data-tooltip="Whats up, Alex?!" data-tooltip-pos="bottom">Bottom</a>
  </div>
</div>

Tooltip Sizing

By default, tooltips will always remain single-line no matter their length. You can change this behavior by using the data-tooltip-size attribute with a value of small, medium, large, xlarge, or fit.

Small

Medium

Large

xLarge

My width will fit to element

<div class="o-grid  o-grid--autoFit">
  <div class="o-grid-cell">
    <a href="#" data-tooltip="Short text" data-tooltip-size="small">Small</a>
  </div>

  <div class="o-grid-cell">
    <a href="#" data-tooltip="Medium amount of text works best." data-tooltip-size="medium">Medium</a>
  </div>

  <div class="o-grid-cell">
    <a href="#" data-tooltip="Large amount of text works best for this one. Multiple sentences bruh!" data-tooltip-size="large">Large</a>
  </div>

  <div class="o-grid-cell">
    <a href="#" data-tooltip="This one is the big boy. Throw in paragraphs in here if you want. But really, who's going to read this man? No one, dawg. No one." data-tooltip-size="xlarge">xLarge</a>
  </div>

  <div class="o-grid-cell">
    <a href="#" data-tooltip="Bacon ipsum dolor amet chuck fatback picanha short loin bresaola ham. Drumstick biltong meatball, filet mignon shank tenderloin ham hock. Andouille capicola chuck ball tip spare ribs flank cow. Sirloin tail short ribs t-bone alcatra pork loin ribeye jerky." data-tooltip-size="fit">My width will fit to element</a>
  </div>
</div>

Showing tooltips programatically

If you want to show tooltips without having a user hover, you can simply use the data-balloon-visible attribute. Notice no value is needed with this attribute.

This is useful if you’d like to show a tooltip via JavaScript by adding/removing the attribute.

No need to hover!

<a href="#" data-tooltip="I am visible by default!" data-tooltip-visible>No need to hover!</a>

Tooltip Theme

Change the theme of a tooltip with the data-tooltip-theme attribute, using a value of dark or light. The default theme is light.

I have a dark theme!

<a href="#" data-tooltip="Look! I'm a dark theme!" data-tooltip-theme="dark">I have a dark theme!</a>