Simpletip - A simple jQuery tooltip plugin

Simpletip - A simple jQuery tooltip plugin

Effects

Currently there are only two effects available by default in jQuery's base effects library, fade and slide:

View code

JavaScript code

$("JQUERY SELECTOR").simpletip({ showEffect: 'slide', hideEffect: 'slide', position: 'top' });

Here's a pretty basic tooltip

A simple tooltip

applied with the slide effect.

View code

JavaScript code

$("JQUERY SELECTOR").simpletip({ position: 'top' });

Here's another tooltip with the default fade effect.

A simple tooltip

View code

JavaScript code

$("JQUERY SELECTOR").simpletip({ fixed: true, position: 'right', showEffect: 'slide', hideEffect: 'fade' });

Separate effects can be applied

A simple tooltip

to show and hide events, like this slide-in fade-out tooltip.

Fortunately, there is also the option of custom methods for hiding and showing your tooltips! This is achieved by the use of the 'custom' showEffect/hideEffect property and the showCustom and hideCustom method callbacks, which are fired when the tooltip is shown or hidden. Examples:

View code

JavaScript code

$("JQUERY SELECTOR").simpletip({ position: 'bottom', showEffect: 'custom', showCustom: function(){ // Note the this attribute refers to the tooltip itself $(this).css({ fontSize: '12px', display: 'block' }) .animate({ fontSize: '20px' }, 400); } });

Applying a custom show effect

A simple tooltip

using the showEffect and showCustom properties.

View code

JavaScript code

$("JQUERY SELECTOR").simpletip({ position: 'bottom', showEffect: 'custom', hideEffect: 'custom', showCustom: function(){ // Note the this attribute refers to the tooltip itself $(this).animate({ width: '150px', opacity: 1, display: 'block' }, 400); }, hideCustom: function(){ // Note the this attribute refers to the tooltip itself $(this).animate({ width: '100px', opacity: 0, display: 'none' }, 400); } });

Applying custom effects on both

A simple tooltip

show and hide.

If you require the hideTime or showTime properties you defined, they can be accessed as an argument of the custom callback function:

View code

JavaScript code

$("JQUERY SELECTOR").simpletip({ position: 'bottom', showEffect: 'custom', // Note the argument (showTime) in the function definition showCustom: function(showTime){ $(this).css({ borderWidth: 'inherit', fontSize: '12px', display: 'block' }) .animate({ borderWidth: 4, fontSize: '16px' }, showTime); } });

This new tooltip utilises the your configurations showTime property

A simple tooltip

via a method argument.