Tooltips 2015

Demo

Standard Tooltip

Hover over information icon at end of this sentence to preview the standard tooltip.

Tooltips are best when character limit is within 250 (includes spaces & punctuations). Use the tooltip helper to optimize your message.

Tooltip with colour

Hover over information icon to preview. Note ASCII characters are required within the TITLE property to include the inline CSS. View HTML code to copy .

Tooltip on text

Dripper, whipped, shop a strong froth, cup aftertaste carajillo grinder percolator iced. Redeye, café au lait, acerbic barista dripper coffee extraction eu lungo mazagran hover over icon to see styled tooltip. Example

Tooltip on an image

Hallo! I'm a very cool tooltip over an image. Fancy eh!

HTML for Text

HTML for Image

JavaScript

Add to HEAD

$( function()
{
var targets = $( '[rel~=tooltip]' ),
target  = false,
tooltip = false,
title   = false;
targets.bind( 'mouseenter', function()
{
target  = $( this );
tip     = target.attr( 'title' );
tooltip = $( '
<div id="tooltip"> </div>
' );
if( !tip || tip == '' )
return false;
target.removeAttr( 'title' );
tooltip.css( 'opacity', 0 )
.html( tip )
.appendTo( 'body' );
var init_tooltip = function()
{
if( $( window ).width()  $( window ).width() )
{
pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
tooltip.addClass( 'right' );
}
else
tooltip.removeClass( 'right' );
if( pos_top < 0 )
{
var pos_top  = target.offset().top + target.outerHeight();
tooltip.addClass( 'top' );
}
else
tooltip.removeClass( 'top' );
tooltip.css( { left: pos_left, top: pos_top } )
.animate( { top: '+=10', opacity: 1 }, 50 );
};
init_tooltip();
$( window ).resize( init_tooltip );
var remove_tooltip = function()
{
tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
{
$( this ).remove();
});
target.attr( 'title', tip );
};
target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
});
});

Demo - Tooltips 2015