All animations always requires
the latest version of the plugin.
|  | |
Tooltip example:Blah tooltip 1 blah blah blah blah blah,
blah blah blah blah blah blah tooltip 2,
blah blah blah blah tooltip 3 blah blah .
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>
Blah <a id="twiz-tooltip-1" class="twiz_tooltip">tooltip 1</a> blah blah blah blah blah,
blah blah blah blah blah blah <a id="twiz-tooltip-2" class="twiz_tooltip">tooltip 2</a>,
blah blah blah blah <a id="twiz-tooltip-3" class="twiz_tooltip">tooltip 3</a> blah blah.
<!-- 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 created section (click the + Menu inside the plugin)
(right-click, save target as/save link as).
free-simple-tooltip.twiz
Free Simple Tooltip , created in Montreal, Quebec, Canada.
Thank you all for your continued and growing support!
