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 using the drop effect">Drop</button>
</div>
<div class="button-container">
<button class="slide" title="I'm using the slide effect">Slide</button>
</div>
<div class="button-container...
