Now that we've seen how powerful plugins are and how easy they make advanced functionality, let's see how we can take advantage of another plugin to make custom tooltips.
Browsers automatically create tooltips when you include the title attribute — usually on a link or an image. When your site visitor hovers their mouse cursor over the item or moves focus to the item by tabbing to it, the tooltip will appear — usually as a small yellow box that appears to be floating over the page. Tooltips are a great way to add a little additional information to your page. Screen reader software reads out tooltip text for site visitors with disabilities who are using assistive technology, making them useful for enhancing accessibility. Furthermore, title attributes on images and links can help search engines index your content more effectively.
In this chapter, we'll learn:
- How to use Craig Thompson's qTip plugin to replace the browser's default tooltips
- How to customize the appearance of the qTip tooltips
- How to enhance a navigation bar with custom tooltips
- How to display Ajax content in custom tooltips
I hope I've convinced you that title attributes are great for enhancing both the usability and accessibility of your site. The only problem with tooltips is that they can't be customized in any way. Each browser has its own style of tooltip and that style is not customizable via CSS. Sometimes this is fine, but sometimes it's nice to have more control over the appearance of tooltips.