Simple custom tooltips

Browsers automatically create tooltips when you include the title attribute on your HTML element. Titles are usually used on links and images, but they can be added to nearly every type of HTML element. When your site visitors hover their mouse cursor over an element with a title attribute or move focus to the item by tabbing to it using the keyboard, 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, the title attributes on images and links can help search engines index your content more effectively.

I hope I've convinced you that the title attributes are great for enhancing both the usability and the 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 accessible via CSS. This is fine, but sometimes, it's nice to have more control over the appearance of tooltips.