Tipfy - Simple Tooltip ES 6

A Javascript library ES6, without a dependency of jQuery, Zepto, and etc... Very simple to install and use. With only 4kb code (JS + CSS)

Install / Usage

Javascript

You can add Tipfy script in 3 ways: "CDN (ES6), ES5 script and Local Script"

CDN script

<script src="https://cdn.rawgit.com/figuarnieri/tipfy/master/js/tipfy.min.js"></script>

ES5 script

<script src="path/js/tipfy.es5.min.js"></script>

Local script

<script src="path/js/tipfy.min.js"></script>

Stylesheet

You can add Tipfy stylesheet in 2 ways: "CDN (Only Chrome and Firefox) and Local CSS (by scss)"

CDN style (Only Chrome and Firefox)

<link rel="stylesheet" href="https://cdn.rawgit.com/figuarnieri/tipfy/master/css/tipfy.raw.min.css">

Local style (by scss)

<link rel="stylesheet" href="path/css/tipfy.min.css">

Instance Selector

You can instantiate Tipfy through standard CSS selectors

Selector by attribute

<i class="fa fa-user" data-tipfy="User Settings" aria-hidden="true" aria-label="User Settings"></i>

<script>
  new Tipfy('[data-tipfy]');
</script>

Selector by className

<i class="fa fa-user tooltip-by-class" aria-hidden="true" aria-label="User Settings"></i>

<script>
  new Tipfy('.tooltip-by-class');
</script>

Selector by className and attribute

<span class="section">
  <i class="fa fa-user" title="User Settings" aria-hidden="true" aria-label="User Settings"></i>
</span>

<script>
  new Tipfy('.section [title]');
</script>

Examples

The Simple Tooltip 💬

Support HTML 🌐

Directions Tooltip 👆 👇 👈 👉

Add your custom class 😍

Get HTML Element (.screen--logo) 💯

Raw Text (.screen--logo) 🗿

Data attributes [data-*]

If necessary, you could add attributes in the tag, to configure your tooltips options

data-tipfy

Attribute to add text in your tooltip or HTML Element

<i data-tipfy="Simple Text"></i> <i data-tipfy=".select-class"></i>

data-tipfy-side

Attribute to add direction side in your tooltip

[data-tipfy-side="top"] (default)
[data-tipfy-side="bottom"]
[data-tipfy-side="right"]
[data-tipfy-side="left"]

<i data-tipfy="Simple Text" data-tipfy-side="right"></i>

data-tipfy-class

Attribute to add one or more custom class

<i data-tipfy="Simple Text" data-tipfy-class="select-class-custom"></i>

data-tipfy-text

Add data-tipfy-text attribute to get raw text, if your tooltip text is a selector css

<i data-tipfy=".select-class" data-tipfy-text=""></i>

Source

Github | @figuarnieri