Using effects in tooltips

You will have hopefully noticed that, from each of the examples demonstrated in this chapter, each tooltip will fade in and out gradually, by default. Tooltips are not limited to using only this fade in or out effect; you may prefer to use something that shows a little more impact when displayed on screen.

In our next example, we will look at how you can alter your code to use different effects, to achieve this effect. Add the following lines of code immediately below the last call to the jQuery UI library in tooltip7.html:

<script src="development-bundle/ui/jquery.ui.effect.js"></script>
<script src="development-bundle/ui/jquery.ui.effect-bounce.js"></script>
<script src="development-bundle/ui/jquery.ui.effect-explode.js"></script>

Next, remove these two lines from the existing markup:

<label for="input">Please enter some text:</label>
<input type="text" id="input" title="I am a tooltip!">

Alter the final <script...