Small Animated Html5 Tooltips With Pure CSS – tippy.css

Preview:

Description:

Just another CSS library for creating animated tooltips on your DOM elements using only CSS/CSS3 and HTML5 data attributes. Without any 3rd dependencies.

How to use it:

Just place the tippy.css file in the head section of the webpage and we’re ready to go.

<link href="src/tippy.css" rel="stylesheet">

Add custom tooltip content to your element using the ‘data-tippy’ attribute:

<button data-tippy="I am a tooltip!" class="btn btn-danger">Button Example</button>
<a href="http://www.google.com" data-tippy="Link to Google">Link example</a>
<span data-tippy="Hello world">Inline element example</span>

Adjust the tooltip position using the ‘data-tippy-pos’ attribute:

<button data-tippy="I am a tooltip!" 
        data-tippy-pos="top">
        Button Example
</button>
<button data-tippy="I am a tooltip!" 
        data-tippy-pos="right">
        Button Example
</button>
<button data-tippy="I am a tooltip!" 
        data-tippy-pos="botom">
        Button Example
</button>
<button data-tippy="I am a tooltip!" 
        data-tippy-pos="left">
        Button Example
</button>

Add custom CSS3 animations to the tooltips. The CSS library currently comes with 2 animations: ‘slide’ and ‘bubble’.

<button data-tippy="I am a tooltip!" 
        data-tippy-pos="top"
        data-tippy-animate="slide">
        Button Example
</button>
<button data-tippy="I am a tooltip!" 
        data-tippy-pos="right"
        data-tippy-animate="bubble">
        Button Example
</button>