The tail.tooltip script can fetch each element, which contains the data-tooltip attribute, by itself. You just need the following line, which you can place everywhere (but after the script has been embed, of course)
<script type="text/javascript" src="Source/tail.tooltip-1.0.1.js"></script> <script type="text/javascript"> Elements.tailTooltip(); </script>
You can add your options, which are described below, inside the () brackets.
If you want to add the tooltips to specific items, you can simple use:
<script type="text/javascript"> Elements(".my-tooltips").tailTooltip(); $$(".my-awesome-tooltips").tailTooltip(); </script>
The current version supports 5 settings:
<script type="text/javascript"> Elements.tailTooltip({ show: "hover", status: "off", margin: 5, position: "right", styles: {} }); </script>
Your tooltip text must be set inside the element:
data-tooltip="Your Tooltip text (Required)!"
You can change the show, status, margin and position settings directly on the respective elements:
data-tooltip-conf="click|on|10|bottom"
And you can also change the design of the tooltip directly on the respective element:
data-tooltip-style="color:#333;"
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus