fatihhayri/tootik

A pure CSS/SCSS/LESS Tooltips library. Super easy to use, No JavaScript required.

Tootik

A pure CSS/SCSS/LESS Tooltip library. Super easy to use, No JavaScript required.

Tooltip Generator:

https://eliortabeka.github.io/tootik/

Demo

https://eliorshalev.github.io/tootik/

Installation

CDN:

https://unpkg.com/[email protected]/css/tootik.min.css

Using npm:

npm install tootik

Using bower:

bower install tootik

Manually: Download tootik.min.css from this repo or from demo site and add it to your HTML. e.g.

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

Define a data-tootik attribute in your element and let the magic happens.

<span data-tootik="...">...</span>

Additionally, you can define a data-tootik-conf attribute to either change position or use a feature.

<span data-tootik="..." data-tootik-conf="...">...</span>

Positioning

<span data-tootik="...">Top</span>
<span data-tootik="..." data-tootik-conf="right">Right</span>
<span data-tootik="..." data-tootik-conf="bottom">Bottom</span>
<span data-tootik="..." data-tootik-conf="left">Left</span>

Types

<span data-tootik="..." data-tootik-conf="invert">invert</span>
<span data-tootik="..." data-tootik-conf="success">success</span>
<span data-tootik="..." data-tootik-conf="info">info</span>
<span data-tootik="..." data-tootik-conf="warning">warning</span>
<span data-tootik="..." data-tootik-conf="danger">danger</span>

Features

<span data-tootik="..." data-tootik-conf="shadow">shadow</span>
<span data-tootik="..." data-tootik-conf="delay">delay</span>
<span data-tootik="..." data-tootik-conf="multiline">multiline</span>
<span data-tootik="..." data-tootik-conf="no-fading">no-fading</span>
<span data-tootik="..." data-tootik-conf="no-arrow">no-arrow</span>
<span data-tootik="..." data-tootik-conf="square">square</span>

Credit

Handcrafted with love by Elior Shalev Tabeka

LESS syntax by Elena Torro