A simple JavaScript tooltip library.
You can add a tooltip to any element you like. For example, we could add a tooltip to any element with a tooltip
class.
Tooltip.new('.tooltip');
By default it will assume you have a data-title
attribute that will be used for the tooltips contents.
<span class="tooltip" data-title="Hello, World">This will have a tooltip!</span>
You can pass options to the new
function as the second argument. The options are as follows.
The maximum width of the tooltip container.
The offset of the tooltip from the element it is attached too. Can be a positive or negative number.
The position of the tooltip. Available options are: top
, topLeft
, topRight
, right
, left
, bottomRight
, bottomLeft
, bottom
The attribute that contains the tooltip contents. Defaults to data-title
.
Here is an example using the available options.
Tooltip.new('.tooltip', {
width: 400,
offset: 2,
position: 'bottomLeft',
attribute: 'data-tooltip'
});
<span class="tooltip" data-tooltip="Hello, World">This will have a tooltip!</span>
Should work in all modern browsers. Not tested in IE although it should work in IE10+.
Released under the BSD 2-Clause License.