What is Cooltip?

In many web projects I find myself wishing I had a tooltip plugin on hand. There are many out there, but I often find they are pretty heavy, complex or outdated.

I also needed the ability to control the alignment of the tooltip body from the target element (separate from the typical "direction" option), which would help immensely with icons in the corners of pages. So, I decided to write my own plugin.

Cooltip is a jQuery tooltip plugin, intended to be lightweight and flexible. If you'd like to read more, check out my blog post.

Demo

Inputs and Custom Classes

Set direction: top (default)

Set direction: right

Set direction: bottom

Set direction: left

Options

Property Values / Description Default Example
align

Direction of which the tooltip leans. This option depends on set direction (see option below) of the tooltip.

If direction:'top' (default) or direction:'bottom', options are: right, left

If direction:'right' (default) or direction:'left', options are: top, bottom

 middle $(".has-tip").cooltip({direciton: 'top', align: 'right'});
attr

Attribute of element to pull tooltip text from.

 title

<a href='#' class='has-tip' data-custom-attr='Here is a tooltip!'>example link</a>

$(".has-tip").cooltip({attr: 'data-custom-attr'});

class

Class(es) to be added to the tooltip. Separate multiple classes by spaces.

 blank $(".has-tip").cooltip({class: 'error large'});
direction

Which direction from the element the tooltip should display.

 top $(".has-tip").cooltip({direction: 'right'});
enabled

Whether or not to enable tooltip on instantiation. Can be true or false.

true $(".has-tip").cooltip({enabled: false});
trigger

Event that triggers the tooltip. Can be focus or hover.

hover $("input.has-tip").cooltip({trigger: 'focus'});
zIndex

Integer value for css property z-index.

CSS style settings $("input.has-tip").cooltip({zIndex: 1000});

API

Property Values / Description Example
addClass Appends a class or multiple classes (separated by spaces) to a tooltip. $(".has-tip").cooltip('addClass', 'success');
destroy Uninitialize Cooltip for a target $(".has-tip").cooltip('destroy');
disable Disable a tooltip from showing on the triggering event. $(".has-tip").cooltip('disable');
enable Enable a tooltip that was previously disabled to show on triggering event. $(".has-tip").cooltip('enable');
removeClass Removes a class or multiple classes (separated by spaces) to a tooltip. $(".has-tip").cooltip('removeClass', 'success');
update Update the tooltip contents. Useful for when the target's title (or corresponding tooltip attribute) is changed. $(".has-tip").cooltip('update');

Download / Implementation

To plug & play, download the package (button on the right) and use the cooltip.js and cooltip.css files within the "dist" folder.

Example: <a href='#' class='has-tip' title='Here is a tooltip!'>example link</a> and $(".has-tip").cooltip();

Development instructions available on the GitHub repo: https://github.com/jaketlarson/cooltip

Contributions / Maintenance

Cooltip is fairly new, and I'm sure there are plenty of bugs already. I am going to be using this as my go-to tooltip component in my dev projects (that's why I built it), so when I find bugs I will address them. If you find Cooltip useful and have bugs or ideas, feel free to open an issue. I'll add to the issues as I find bugs, as well.

License / Copyright

©2015 Jake Larson. Cooltip uses the MIT License.