Slide effect

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

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

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

JavaScript

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:

$("a.withTooltip").tooltip({
  effect: 'slide',
  slideOffset: 30
});

JavaScript