Tootik is a pure animated CSS/SCSS/LESS Tooltip library that looks great in all modern browsers, easy to use. No need for javascript.

Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

How to make use of it:

1. Simply embed the tootik.css basic stylesheet on the webpage.

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

2. Specify the content to be displayed in the tooltip using the data-tootik attribute:

<a href="#" data-tootik="I am a tooltip">Hover me</a>

3. Change the default mode.

<a href="javascript:;" data-tootik="Right" data-tootik-conf="right">right</a>
<a href="javascript:;" data-tootik="Bottom" data-tootik-conf="bottom">bottom</a>
<a href="javascript:;" data-tootik="Left" data-tootik-conf="left">left</a>

Highly Configurable Floating Panels, Modals, Tooltips | jsPanel

4. Change the default tooltip theme.

<a href="javascript:;" data-tootik="Invert" data-tootik-conf="invert">invert</a>
<a href="javascript:;" data-tootik="Success" data-tootik-conf="success">success</a>
<a href="javascript:;" data-tootik="Info" data-tootik-conf="info">info</a>
<a href="javascript:;" data-tootik="Warning" data-tootik-conf="warning">warning</a>
<a href="javascript:;" data-tootik="Danger" data-tootik-conf="danger">danger</a>

5. More configuration options can be passed through the data-tootik-conf attribute.

<a href="#" data-tootik="Delay" data-tootik-conf="delay">delay</a>
<a href="#" data-tootik="No Fading" data-tootik-conf="no-fading">no-fading</a>
<a href="#" data-tootik="Shadow" data-tootik-conf="shadow">shadow</a>
<a href="#" data-tootik="A pure CSS Tooltip library." data-tootik-conf="multiline">multiline</a>
<a href="#" data-tootik="No Arrow" data-tootik-conf="no-arrow">no-arrow</a>
<a href="#" data-tootik="Square" data-tootik-conf="square">square</a>

6. Modify or override default variables in SCSS.

// Misc
$font-size: 13px;
$transition-style: cubic-bezier(0.73, 0.01, 0, 1);
$border-width: 4px;
// Colors
$color-default: #000000;
$color-invert: #ffffff;
$tootik-default: $color-default;
$tootik-invert: $color-invert;
$tootik-success: #8bc34a;
$tootik-info: #29D2E4;
$tootik-warning: #F87D09;
$tootik-danger: #e91e63;

See Demo And Download

Official Website(eliortabeka): Click Here

This superior jQuery/javascript plugin is developed by eliortabeka. For extra Advanced Usage, please go to the official website.