All animations always requires
the latest version of the plugin.
Tooltip example:
Bla tooltip 1 bla bla bla bla bla,
bla bla bla bla bla bla tooltip 2,
bla bla bla bla tooltip 3 bla bla.
To add additional tooltip, copy one tooltip link and one tooltip box and replace the numbers at the end with the next number. That’s it.
e.g.
New code #1 <a id="twiz-tooltip-4" class="twiz_tooltip">tooltip 4</a>
New code #2
<div id="twiz-tooltip-box-4" class="twiz_tooltip_box">Your HTML here.</div>
Customize the style to fit your needs.
<style type="text/css">
.twiz_tooltip {
color: blue;
}
.twiz_tooltip:hover {
cursor: pointer;
background-color: #000000 !important;
color: #ffffff !important;
}
.twiz_tooltip_box {
width: 200px;
min-height: 110px;
background-color: #ebebeb;
border: 1px solid #000000;
padding: 15px;
display: none;
}
</style>
<strong>Tooltip example:</strong>
Bla <a id="twiz-tooltip-1" class="twiz_tooltip">tooltip 1</a> bla bla bla bla bla,
bla bla bla bla bla bla <a id="twiz-tooltip-2" class="twiz_tooltip">tooltip 2</a>,
bla bla bla bla <a id="twiz-tooltip-3" class="twiz_tooltip">tooltip 3</a> bla bla.
<!-- Paste new code #1 here -->
<div id="twiz-tooltip-box-1" class="twiz_tooltip_box"> Your HTML here. <ul><li>Box 1</li></ul> </div>
<div id="twiz-tooltip-box-2" class="twiz_tooltip_box"> Your HTML here. <ol><li>Box 2</li><li>Box 2</li></ol> </div>
<div id="twiz-tooltip-box-3" class="twiz_tooltip_box"> Your HTML here. <ul><li>Box 3</li><li>Box 3</li><li>Box 3</li></ul> </div>
<!-- Paste new code #2 here -->
Import the twiz file under a new section. (Right-click, Save Target As/Save Link As)
free-simple-tooltip.twiz
Free Simple Tooltip
