tail.tooltip 1.0.1

A small customizable tooltip interface, written for MooTools v1.6.0.



Details

Author
SamBrishes
Current version
1.0.1
GitHub
pytesNET/tail.tooltip
Downloads
152
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.6.0: '*'

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.

blog comments powered by Disqus