How to use

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>

Available Options

The current version supports 5 settings:

<script type="text/javascript">
    Elements.tailTooltip({
        show:        "hover",
        status:      "off",
        margin:      5,
        position:    "right",
        styles:      {}
    });
</script>

• show allows 'hover', 'mouseover' and 'click'. (Check the demonstration for further informations).
• status defines the initialization value of the tooltip. ("on" shows the tooltip, "off" does it not).
• margin defines the outer-space between the element and the tooltip.
• position defines where the tooltip should appear ("top", "left", "right", "bottom").
• styles defines an object with additional stylings.

Available Attributes

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;"

Discuss

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.