/super-simple-css-tooltips

Super simple tooltips

Primary LanguageCSS

Super Simple CSS Tooltips

Easily add a tooltip hover to an element. The tooltip hover can be placed to the left, right, or bottom of an element. A second bottom option includes a pointer.

image of tooltip

CSS Classes

  • tooltip--left
  • tooltip--right
  • tooltip--bottom
  • tooltip--triangle

Usage

The CSS takes any element that has a tooltip--* class and uses the data-tooltip attribute on the element to provide the tooltip text.

[class^="tooltip"] {
  ...
  content: attr(data-tooltip);
  ...
}
<img href="/img/info.svg" class="tooltip--left" data-tooltip="This is the text displayed">

Support

Current versions of Chrome, Firefox, Safari, Edge, and IE10+.