Working with Tooltips

Alex Libby

December 2013

(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:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tooltip</title> <link rel="stylesheet" href="development- bundle/themes/redmond/jquery.ui.all.css"> <style> p { font-family: Verdana, sans-serif; } </style> <script src = "js/jquery-2.0.3.js"></script> <script src = "development- bundle/ui/jquery.ui.core.js"></script> <script src = "development-bundle/ui/jquery.ui.widget.js"> </script> <script src = "development-bundle/ui/jquery.ui.position.js"> </script> <script src = "development-bundle/ui/jquery.ui.tooltip.js"> </script> <script> $(document).ready(function($){ $(document).tooltip(); }); </script> </head> <body> <p>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 <a href="http://www." title="This was generated from">blandit</a> 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.</p> </body> </html>

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 <script> element in your code, as shown in the previous example:

<script> $(document).ready(function($){ $(document).tooltip(); }); </script>

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 </body> tag. This is automatically removed as soon as the target element loses focus.

ARIA, or Accessible Rich Internet Applications, provides a way to make content more accessible to people with disabilities. You can learn more about this initiative at

It is not necessary to only use the $(document) element when adding tooltips. Tooltips will work equally well with classes or selector IDs; using a selector ID, will give a finer degree of control.

Overriding the default styles

When styling the Tooltip widget, we are not limited to merely using the prebuilt themes on offer, we can always elect to override existing styles with our own. In our next example, we’ll see how easy this is to accomplish, by making some minor changes to the example from tooltip1.html.

In a new document, add the following styles, and save it as tooltipOverride.css, within the css folder:

p { font-family: Verdana, sans-serif; } .ui-tooltip { background: #637887; color: #fff; }

Don't forget to link to the new style sheet from the <head> of your document:

<link rel="stylesheet" href="css/tooltipOverride.css">

Before we continue, it is worth explaining a great trick for styling tooltips before committing the results to code.

If you are using Firefox, you can download and install the Toggle JS add-on for Firefox, which is available from This allows us to switch off JavaScript on a per-page basis; we can then hover over the link to create the tooltip, before expanding the markup in Firebug and styling it at our leisure.

Save your HTML document as tooltip2.html. When we run the page in a browser, you should see the modified tooltip appear when hovering over the link in the text:

Using prebuilt themes

If creating completely new styles by hand is overkill for your needs, you can always elect to use one of the prebuilt themes that are available for download from the jQuery UI site.

This is a really easy change to make. We first need to download a copy of the replacement theme; in our example, we’re going to use one called Excite Bike. Let’s start by browsing to, then deselecting the Toggle All option. We don’t need to download the whole library, just the theme at the bottom, change the theme option to display Excite Bike then select Download.

Next, open a copy of tooltip2.html then look for this line:

<link rel="stylesheet" href="development-bundle/themes/redmond

You will notice the highlighted word in the above line. This is the name of the existing theme. Change this to excite-bike then save the document as tooltip3.html, then remove the tooltipOverride.css link, and you’re all set. The following is our replacement theme in action:

With a single change of word, we can switch between any of the prebuilt themes available for use with jQuery UI (or indeed even any of the custom ones that others have made available online), as long as you have downloaded and copied the theme into the appropriate folder.

There may be occasions though, were we need to tweak the settings. This gives us the best of both worlds, where we only need to concentrate on making the required changes. Let’s take a look at how we can alter an existing theme, using ThemeRoller.

Creating custom themes with ThemeRoller

If we browse to, we can alter some of the settings used to style the Tooltip example on this page. Alter the Background color & texture option under Content, then change the border to #580000, as shown in the following screenshot:

Move down to the Clickable: active state section, then change the Background color & texture option to #ccb2b2 at 100%, and the Border option to #580000. Leave the rest unchanged:

If you scroll down to the Tooltip example at the foot of the page, then hover over either image, you should see the effects of our changes:

While I know the colors may not win any style awards, you can see how easy it is to alter the colors. When you’ve finished choosing your colors, you can then download the final version from the download page.


The Tooltip widget is an excellent way to communicate short pieces of information, such as an error or alert, to the user, you can even use it as a mini help system.

Resources for Article:

Further resources on this subject:

You've been reading an excerpt of:

jQuery UI 1.10: The User Interface Library for jQuery

Explore Title