Tooltip

Introduction

Tooltip is a JavaScript library for basic tooltip implementation.

Tooltip doesn't provide bindings to user interaction (like displaying on hover). It is designed to be consumed by wrappers like Tooltips, form validation libraries, etc.

Supports typed classes, and effects via seamless CSS transitions (you don't have to define transition durations in JavaScript).

Compatibility

Basic support starts at IE8, but Tooltip arrows are styled for IE9+. If you want correct arrows in IE8, just restyle the .tooltip:after pseudoelement with ancient times in mind. Otherwise IE8 users see squares instead of arrows. No biggy if you ask me :)

Other browsers just work.

Changelog

Upholds the Semantic Versioning Specification.

Support

I don't want to monetize my libraries as I want them to be accessible to everyone with any budget. That being said, free software isn't free, it's just paid by with developer's time, and right now I could use some help :)

Installation

Tooltip is a component:

component install darsain/tooltip

The standalone build of a latest version is available at:

• tooltip.zip - combined archive
• tooltip.js - 25 KB sourcemapped
• tooltip.min.js - 10 KB, 2KB gzipped
• tooltip.css - 4.5 KB, including types & transitions

When isolating issues on jsfiddle, use the tooltip.js URL above.

Usage examples

When using component:

var Tooltip = require('tooltip');

Create a simple text tooltip, position somewhere on a page and show:

var tip = new Tooltip('Foo bar!');
tip.position(200, 200).show();

Use image element as content:

var img = document.createElement('img');
img.src = 'http://foo.com/bar.jpg';
img.width = '64';
img.height = '64';
tip.content(img);

Position tooltip while using element as a target:

tip.position(document.querySelector('.target'));

Change tooltip type and effect:

tip.type('error').effect('fade');

Documentation

Documentation is centralized in the Tooltip's Repository Wiki, which makes it way easier to maintain and keep always up to date.

• Tooltip API
• Styling