The tooltipify plugin creates a slide in, stylable tooltip to replace the default browser tooltip.
The show and hide events are customizable. Defaults are "mouseover" and "mouseout".
The latest version has display awareness and also responds to the window resize event.
The tooltipify plugin also supports html content by using the content property.

Get source Get NuGet package

Demo

Hover over the item below to see tooltipify in action.

Try me!

The code

$("[title]").tooltipify();
Try me!

The code

$("[title]").tooltipify({ position: "left", animationProperty: "top", width: 150 });
Try me!

The code

$("[title]").tooltipify({ position: "right", animationProperty: "" });
Click me!

The code

$("[title]").tooltipify({ position: "bottom", showEvent : "click", hideEvent : "focusout" });
Try me!

This tooltip uses the content property to set html content.

The code

$("demo5 > div").tooltipify({ content : "<p>This is <b>html</b> content</p><p>Setting html content is easy, just use the <b>content</b> property!</p>" });

The code

$(".showall").click(function() { $('[title]').tooltipify("show"); return false; });
$(".hideall").click(function() { $('[title]').tooltipify("hide"); return false; });

Methods

Options

animationDuration datatype: Integer

Sets the duration of the animation in miliseconds.
default: 100.
$("[title]").tooltipify({ animationOffset : 200 });

animationOffset datatype: Integer

Sets the offset used in the animation propery to animate for showing.
default: 50.
$("[title]").tooltipify({ animationDuration : 500 });

animationProperty datatype: String

Sets the propery to animate for showing. When left empty, no animation will take place.
default: "left".
possible values: All properties supported by the animate method of jQuery are allowed.
$("[title]").tooltipify({ animationProperty : "top" });

content datatype: String

Sets the content of the tooltip. This can be either text or html.
Note: When content is set, the title attribute will be ignored.
Note: When text is set, no html encoding will take place.
default: ""
$("span.tooltip").tooltipify({ content : "<div>my content</div>"});

cssClass datatype: String

Sets the class of the tooltipify container.
default: ""
$("span.tooltip").tooltipify({ cssClass : "tooltip-purple"});

displayAware datatype: Boolean

Sets wheter the tooltip should be display aware. When set to true, the tooltip will be displayed on an other position (probably the opposite direction) when there is not enough space to display the tooltip.
default: true
$("[title]").tooltipify({ displayAware : true });

hideEvent datatype: String

Sets the event that hides the tooltip.
default: "mouseout"
possible values: Any possible jQuery event or custom event.
$("[title]").tooltipify({ hideEvent : "blur" });

offsetLeft datatype: Integer

Sets an offset to the left.
default: 0
$("[title]").tooltipify({ offsetLeft : 10 });

offsetTop datatype: Integer

Sets an offset to the top.
default: 0
$("[title]").tooltipify({ offsetTop : 10 });

opacity datatype: Double

Sets the final opacity of the tooltip. This will be faded in from 0.
default: 0.8
$("[title]").tooltipify({ opacity : 1 });

position datatype: String

Sets the position of the tooltip.
default: "top"
possible values: "top", "left", "right", "bottom"
$("[title]").tooltipify({ position : "right" });

showEvent datatype: String

Sets the event that triggers the tooltip.
default: "mouseover"
possible values: Any possible jQuery event or custom event.
$("[title]").tooltipify({ showEvent : "click" });

width datatype: Integer

Sets a width to the tooltip.
default: null. The tooltip has the same height as its content.
$("[title]").tooltipify({ width : 200 });

Methods

hide

Hides the tooltip.
$("[title]").tooltipify("hide");

show

Shows the tooltip.
$("[title]").tooltipify("show");

destroy

Destroys the tooltipify element and unbinds all events.
$("[title]").tooltipify("destroy");

Requirements

  • jQuery 1.8.3+ (could also work on previous versions, but is not tested)

Known issues

Please tell me! (report a bug)