Skip to content
lean HTML tooltips
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build
example
src
.eslintrc
.gitignore
LICENSE
Makefile
README.md
package.json

README.md

htmlTT.js

Configurable JavaScript/HTML tooltips. IE6+. Small size (js 4.6k minified, 1.7k gzipped), no dependencies.

Checkout and build:

$ git clone git@github.com:npup/htmlTT.git
$ cd htmlTT
$ npm install
$ make

API:

htmlTT.create(group[, options]);
    group   - (string) name of tooltip group
    options - (object) options hash:
        hover   - (boolean, default true) if the tooltips should be shown/hidden due to hovering
        focus   - (boolean, default true) if the tooltips should be shown/hidden due to focus/blur
        pos   - (object, default {"x": 0, "y": 0} | boolean false) px offsets of tooltip position. false means no positioning at all
        class - (string) extra CSS class for tooltip view
        view  - (DOM node | string (DOM node id)) element to display tooltip in (no automatic positioning will occur)

Basic usage:

Add some stying for the tooltip view class:

.html-tt {
    border: 2px solid #999;
    border-radius: 3px;
    background-color: #fcfcfc;
    padding: .6em;
    box-shadow: 4px 4px 4px #aaa;
    transition: left .5s, top .5s;
}

.. or just include the example tooltip style htmlTT.css in the head section of your page:

<link rel="stylesheet" type="text/css" href="htmlTT.css" />

The tooltip view will be absolutely positioned - you should only bother setting lickability stuff like font properties, colors, border, box-shadow etc.

Second, annotate your HTML with the data-htmltt attribute. The attribute's value represents the tooltip group and the DOM id of a HTML source, like: [group]#[srcId]

<ul>
    <li data-htmltt="foo#info1">Bloody information</li>
    <li data-htmltt="foo#info2">Other information</li>
</ul>

Third, create the HTML for your tooltips like this:

<script type="text/x-htmltt" id="info1">
    <h3>Fee fi fo fum</h3>
    <p>I smell the DOM</p>
</script>
<script type="text/x-htmltt" id="info2">
    <h3>Yo</h3>
    <p>I left my wallet in el Segundo</p>
</script>

Then, at the bottom of the page, include your preferred version of htmlTT.js and initialize the tooltips for each group by calling htmlTT.create():

<script src="htmlTT.min.js"></script>
<script>
    htmlTT.create("foo");
    // variants:
    // htmlTT.create("foo", {"class": "custom-styles"});
    // htmlTT.create("foo", {"pos": {"x": 10, "y": 10}});
</script>

Pressing ESC on the page closes any open tooltips.

More info

When active, the tooltip view element gets set with two attributes: data-htmltt-group and data-htmltt-src, which contain the group name of the tooltip shown and the DOM id of its current HTML source.

At the same time, the element which triggered the tooltip receives the attribute data-htmltt-active, with the value of the tooltip group name.

Since IE7, such attributes can be target for CSS attribute selectors. Go crazy!

If you initialized a tooltip group with a proper value for the class property, you also have those CSS classes available on the tooltip view (when activated by a tooltip of that group).

Per default, tooltips are triggered for both hover and focus events. You can throttle this (per group) when initializing:

htmlTT.create("fgroup", {"hover": false}); // the "fgroup" tooltips will be focus-only

Not more than one tooltip per group is shown simultaneously - though tooltips from different groups can be (one focused form input and another element somewhere that is being hovered, for example).

Check out the demo page at http://npup.github.io/htmlTT/

Something went wrong with that request. Please try again.