A pure CSS/SCSS/LESS Tooltips library. Super easy to use, No JavaScript required.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
less
scss
LICENSE.md
README.md
bower.json
package.json
tootik.gif

README.md

Tootik

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

Tooltip Generator:

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

tootik playground

Demo

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

Installation

CDN:

https://unpkg.com/tootik@1.0.2/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