This is a message.

Slide effect

Impress your mom with a tooltip that slides and fades. Up, down, left or right.

Download now
Flying screens
Version 2011-03-03
Size 112 kB
OS all
What's new in 3.2
standalone demo

Here you can see the JavaScript setup for the above example:

    $("#download_now").tooltip({ effect: 'slide'});


Configuration options

Here is a full list of available configuration options for this effect. These options are in addition to tooltip's standard options.

property default description
bounce false Since 1.1.0. By default, when the tooltip slides away the sliding continues in the same direction as when the tooltip was shown. By setting this to true the tooltip slides back to its original position.
direction up Since 1.1.0. specifies the sliding direction. Valid values are up, down, left and right.
slideOffset 10 Specifies the position where the tooltip will slide in relation to the trigger element. A positive value means farther upwards and a negative value will cause it to slide farther downwards.
slideInSpeed 200 The sliding speed when the tooltip is shown, in milliseconds
slideOutSpeed 200 The sliding speed when the tooltip is hidden, in milliseconds
slideFade !$.browser.msie Specifies whether sliding is combined with fade-in/fade-out effects. By default this effect is enabled for all browsers except for Internet Explorer. This is because many times the tooltip has a PNG24 background image and IE does not support opacity changes for PNG24 images. If you want to enable fading for all browsers you can simply set this property to true. You can read more about PNG24 images in the User's Manual.

Note: this effect uses a fading animation from zero to full opacity in all browsers other than Internet Explorer.


An example setup using the slide effect with the custom property slideOffset:

effect: 'slide',
slideOffset: 30