O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Applying effects to the tooltip display

The tooltip widget ships with options to control the display, and hide the actions of the element. These are the show and hide options, respectfully, and each accepts an object that specifies animation options. Since the show and hide options control different aspects of the widget display, we have the freedom to use different settings, such as delay for the show and hide actions. Or, we could be drastic about it and use two completely different effects for the animations. Let's explore the various show and hide options available to us in the tooltip widget.

How to do it...

First, let's create some button elements that we'll use to display the tooltips.

<div class="button-container"> <button class="drop" title="I'm ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required