We've built a tooltip plugin which uses a touch of animation to fade in and out when hovering over elements marked with the .tooltip class. Nothing wrong in that – the code works perfectly well, and is an acceptable way of displaying content…right? Wrong! As you should know by now, we can definitely do better. Here's why I chose the tooltip as our example.
Remember how I mentioned back in Chapter 6, Animating in jQuery, that we should consider using CSS3 styling to control our animation? Well, here's a perfect example: we can easily change our code to force jQuery to use CSS3 where possible, or fall back to using the library for older browsers.
The trick behind it is in one line:
<script src="js/jquery.animate-enhanced.min.js"></script>
To see how easy it is, follow the next steps:
In a copy of
tooltipv2.html, add this line as indicated:<script src="js/jquery.min.js"></script> <script src="js/jquery.animate-enhanced...