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="" data-tippy="Link to Google">...</a>
<span data-tippy="Hello world">...</span>
<div data-tippy="Full width element">...</div>

Hover me

Real Elements


Span tag

Div tag

Paragraph tag

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">

Hover me Hover me Hover me Hover me


By default, tooltips are set at a size of 14px. Use the data-tippy-size attribute to specify larger or smaller font sizes. Acceptable values are:

<button data-tippy="Tiny tooltip" data-tippy-size="tiny">Hover me!</button>
<button data-tippy="Small tooltip" data-tippy-size="small">Hover me!</button>
<button data-tippy="Large tooltip" data-tippy-size="large">Hover me!</button>
<button data-tippy="Jumbo tooltip" data-tippy-size="jumbo">Hover me!</button>

Showing Tooltips Manually

If you want a tooltip to always be visible, use the data-tippy-visible attribute. Keep in mind that the tooltip is absolutely positioned, so it will overlap other elements on the page without its parent having extra margin or padding.

<button data-tippy="Always-on tooltip" data-tippy-visible>Hover not necessary!</button>

Special animations

By default, tooltips aren't animated. Include the optional data-tippy-animate property to add a fade effect.

Use one of two optional values – "slide" or "bubble" – for more fancy.


Hover me Hover me Hover me Hover me


Hover me Hover me Hover me Hover me


Hover me Hover me Hover me Hover me

Browser support

Tippy.css has been tested in Internet Explorer 9-11 and the latest versions of Chrome, Firefox, Edge, Safari, Vivaldi, and Opera.

Known issues


Tippy.css has been released under the MIT license.