Configurable JavaScript/HTML tooltips. IE6+. Small size (js 4.6k minified, 1.7k gzipped), no dependencies.
Checkout and build:
$ git clone [email protected]:npup/htmlTT.git
$ cd htmlTT
$ npm install
$ make
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)
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.
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/