(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. ipsum.com” title=”This was generated from www.ipsum.com”>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 https://developer.mozilla.org/en-US/docs/Accessibility/ARIA.
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 https://addons.mozilla.org/en-US/firefox/addon/toggle-js/. 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 http://jqueryui.com/download/, 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
/jquery.ui.all.css”>
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.
