A simple CSS tooltip made with Sass

First of all let's talk about position. You can have a tooltip in different directions ( top , left , bottom , right ).

Secondly as you know color is an important factor. You can also have a Tooltip in different color such as success , info , warning and danger.

And finally other features like ( soft edge , half arrow , movable effect , fade effect , multiline tooltip ). You can use these items either together or separately.



I'll explain with an example:

<link rel="stylesheet" type="text/css" href="simptip-mini.css" />


<link rel="stylesheet" type="text/css" href="simptip.css" />


Then you can do something like this:

<span class="simptip-position-top" data-tooltip="Tooltip's content"> Text </span>

What you see in the data-tooltip attribute is the text content of the tooltip, and the value of class attribute is tooltop's position.

You can use .simptip-position-right , .simptip-position-bottom and .simptip-position-left class for other positions that you would like.

You can also use more features of Simptip by adding these classes:
.half-arrow .simptip-smooth .simptip-fade .simptip-movable .simptip-multiline .simptip-success .simptip-info .simptip-warning .simptip-danger