Tippy Tooltips

Tippy.js provides the logic and styling involved in all types of elements that pop out from the flow of the document and get overlaid on top of the UI.

Here are some more samples.

Here is the code:

HTML - Paste this into an HTML block in the post editor:

<div class="tooltip">
    <button id="t1" class="btn tippy" title="a cute tooltip!">Hover here</button>
    <button id="t2" class="btn tippy" title="a cute tooltip!">Hover here</button>
    <button id="t3" class="btn tippy" title="a cute tooltip!">Hover here</button>
    <button id="t4" class="btn tippy" title="a cute tooltip!">Click here</button>
</div>

CSS - In your Site (or Post) Settings >> Code Injection >> Site Header paste this

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/0.3.0/tippy.css">

Javascript - In your Site (or Post) Settings >> Code Injection >> Site Footer paste this

<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/0.3.0/tippy.js"></script>
<script>
new Tippy('#t1',{
    		position:'top',
    		animation:'scale',
    		arrow:'true'
    	});
    	new Tippy('#t2',{
    		position:'top',
    		animation:'perspective',
            interactive:'true'
    	});
    	new Tippy('#t3',{
    		position:'top',
    		animation:'scale',
    		arrow:'true',
    		theme:'light'
    	});
    	new Tippy('#t4',{
    		position:'top',
    		animation:'scale',
    		arrow:'true',
    		trigger:'click'
    	});
</script>