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>

Hover me

Real Elements

Link

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

Sizes

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.

Fade:

Hover me Hover me Hover me Hover me

Slide:

Hover me Hover me Hover me Hover me

Bubble:

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

License

Tippy.css has been released under the MIT license.