6 min read

(For more resources related to this topic, see here.)

The jQuery team introduced their version of the tooltip as part of changes to Version 1.9 of the library; it was designed to act as a direct replacement for the standard tooltip used in all browsers. The difference here, though, was that whilst you can’t style the standard tooltip, jQuery UI’s replacement is intended to be accessible, themeable, and completely customizable. It has been set to display not only when a control receives focus, but also when you hover over that control, which makes it easier to use for keyboard users.

Implementing a default tooltip

Tooltips were built to act as direct replacements for the browser’s native tooltips. They will recognize the default markup of the title attribute in a tag, and use it to automatically add the additional markup required for the widget. The target selector can be customized though using tooltip’s items and content options. Let’s first have a look at the basic structure required for implementing tooltips.

In a new file in your text editor, create the following page:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit mi quis imperdiet semper. Fusce vulputate venenatis fringilla. Donec vitae facilisis tortor. Mauris dignissim nibh ac justo ultricies, nec vehicula ipsum ultricies. Mauris molestie felis ligula, id tincidunt urna consectetur at. Praesent blandit faucibus ante ut semper. Pellentesque non tristique nisi. Ut hendrerit tempus nulla, sit amet venenatis felis lobortis feugiat. Nam ac facilisis magna. Praesent consequat, risus in semper imperdiet, nulla lorem aliquet nisi, a laoreet nisl leo rutrum mauris.

Save the code as tooltip1.html in your jqueryui working folder. Let’s review what was used. The following script and CSS resources are needed for the default tooltip widget configuration:

  • jquery.ui.all.css
  • jquery-2.0.3.js
  • jquery.ui.core.js
  • jquery.ui.widget.js
  • jquery.ui.tooltip.js

The script required to create a tooltip, when using the title element in the underlying HTML can be as simple as this, which should be added after the last element in your code, as shown in the previous example:

In this example, when hovering over the link, the library adds in the requisite aria described by the code for screen readers into the HTML link. The widget then dynamically generates the markup for the tooltip, and appends it to the document, just before the closing

Subscribe to the weekly Packt Hub newsletter

* indicates required


Please enter your comment!
Please enter your name here