tippy.css

Pure CSS tooltips.

Create tooltips with ease, without JavaScript.

How to use

First, include the stylesheet at the top of your page.

<link rel="stylesheet" href="path/to/tippy.min.css">

For the simplest case, add the property data-tippy to an element with your tooltip text as the value. You can do this to links, spans, divs, and even buttons. (Well, in most browsers. We'll get to that.)

<button data-tippy="I am a tooltip!">...</button>
<a href="http://www.google.com" data-tippy="Link to Google">...</a>
<span data-tippy="Hello world">...</span>
<div data-tippy="Full width element">...</div>

Tooltip positions

By default, tooltips appear below the element to which they belong. By including the data-tippy-pos property, you can control how they appear. There are four potential values: "up", "down", "left", and "right".

<button data-tippy="I am a tooltip!" data-tippy-pos="up">
<button data-tippy="I am a tooltip!" data-tippy-pos="down">
<button data-tippy="I am a tooltip!" data-tippy-pos="left">
<button data-tippy="I am a tooltip!" data-tippy-pos="right">

Special animations

The tooltips don't have much by way of default animation. They fade in, but that's it. There are two optional animation types, however. Include the data-tippy-animate property and one of two values, "slide" or "bubble".

Browser support

Tippy.css has been tested in Internet Explorer 9-11 and the latest versions of Chrome, Firefox, Edge (yay Windows 10 Insider program), Vivaldi (my browser of choice), and Safari.

Known issues

• Tooltips are created by using the ::before and ::after pseudo-elements, so tooltips on any element that doesn't have those, like images or input fields, won't appear.

You can work around this by wrapping the element in a span or a div, though, like this:

<div data-tippy="Super awesome picture">
   <img src="cats-rule.jpg">
</div>

• If your stylesheet is using pseudo-elements on certain elements, you will run into conflicts. This will result in weird behavior or non-working tooltips.

• HTML inside tooltips will not work, so don't even try.

• Tooltips don't work on <button> elements in Internet Explorer. I don't know why. :/

• The bubble animation uses the clip-path property, and (as of this writing) only works in Chrome, Vivaldi, and Safari.

• Tooltips on links that underline on hover get underlined in Edge.

• Tooltips on buttons get included in the focus outline.
  You can override this behavior with this code:

  button[data-tippy]:focus {
    outline: none;
  }

  I won't include this code in the stylesheet, however. Removing the button's outline will remove its accessibility, so think carefully before you implement this.
  Learn more at www.outlinenone.com.

License

Tippy.css has been released under the MIT license.