Tooltip
A simple JavaScript tooltip library.
Usage
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>
Options
You can pass options to the new
function as the second argument. The options are as follows.
width
The maximum width of the tooltip container.
offset
The offset of the tooltip from the element it is attached too. Can be a positive or negative number.
position
The position of the tooltip. Available options are: top
, topLeft
, topRight
, right
, left
, bottomRight
, bottomLeft
, bottom
attribute
The attribute that contains the tooltip contents. Defaults to data-title
.
Example
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>
Compatibility
Should work in all modern browsers. Not tested in IE although it should work in IE10+.
License
Released under the BSD 2-Clause License.