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
Reward the developer
And make him happy for maintaining this library! :)
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 archivetooltip.js
- 25 KB sourcemappedtooltip.min.js
- 10 KB, 2KB gzippedtooltip.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.