Standalone ES6 JavaScript Tooltip Library – Tipfy.js

Tipfy is a simple, lightweight, easy-to-config, rich text tooltip library written in pure JavaScript (ES6).

How to use it:

Import the Tipfy’s files into your html file.

<link href="tipfy.css" rel="stylesheet">
<script src="tipfy.js"></script>

Embed your tooltip content in the ‘data-tipfy’ attribute as this:

<span data-tipfy="Custom Tooltip Here"></span>

The library also supports html content in the tooltip.

<span data-tipfy="<b>Custom Tooltip Here</b>"></span>

Initialize the Tipfy and done.

new Tipfy('[data-tipfy]');

Add an additional CSS to the tooltip (useful to apply your own CSS styles).

<span data-tipfy="<b>Custom Tooltip Here</b>"
      data-tipfy-class="class--custom">
</span>

Change the default direction.

<span data-tipfy="<b>Custom Tooltip Here</b>"
      data-tipfy-side="top">
      Top
</span>
<span data-tipfy="<b>Custom Tooltip Here</b>"
      data-tipfy-side="bottom">
      Bottom
</span>
<span data-tipfy="<b>Custom Tooltip Here</b>"
      data-tipfy-side="left">
      Left
</span>
<span data-tipfy="<b>Custom Tooltip Here</b>"
      data-tipfy-side="right">
      Right
</span>

Changelog:

10/25/2018

• v1.1.0