First of all let's talk about position. You can have a tooltip in different directions ( top , left , , 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