Working with Tooltips

Exclusive offer: get 50% off this eBook here
jQuery UI 1.10: The User Interface Library for jQuery

jQuery UI 1.10: The User Interface Library for jQuery — Save 50%

Build highly interactive web applications with ready-to-use widgets with this book and ebook

$29.99    $15.00
by Alex Libby | December 2013 | Open Source Web Development

In this article by Alex Libby, the author of jQuery UI 1.10: The User Interface Library for jQuery, we will looked at how, with just a little underlying HTML and a single line of jQuery-flavored JavaScript, we can implement the default tooltip widget.

Introduced as a part of the HTML 3 standard, and using the title attribute as its text, tooltips are a common element used to provide context within a page. You could find them in use in a variety of situations, although it is most likely that they will be found when providing assistance in correcting errors as part of the submission of a form (particularly when it concerns payment for products!).

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

jQuery UI 1.10: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets with this book and ebook
Published: December 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Creating custom themes with ThemeRoller

If we browse to http://jqueryui.com/themeroller/, 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.

Summary

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:


jQuery UI 1.10: The User Interface Library for jQuery Build highly interactive web applications with ready-to-use widgets with this book and ebook
Published: December 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Alex Libby

Alex Libby is from an IT support background. He has been involved in supporting end users for the last 15 years in a variety of different environments, and currently works as a Technical Analyst, supporting a medium-sized SharePoint estate for an international parts distributor, based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been with the Open Source movement, and in particular experimenting with CSS/CSS3 and HTML5. To date, Alex has written five books based on jQuery, HTML5 Video, and CSS for Packt Publishing, and has reviewed several more (including one on Learning jQuery). jQuery UI 1.10: The User Interface Library for jQuery is Alex's sixth book with Packt Publishing.

Books From Packt


jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

jQuery UI 1.8: The User Interface Library for jQuery
jQuery UI 1.8: The User Interface Library for jQuery

jQuery 1.3 with PHP
jQuery 1.3 with PHP

jQuery 1.4 Animation Techniques: Beginners Guide
jQuery 1.4 Animation Techniques: Beginners Guide

jQuery UI Cookbook
jQuery UI Cookbook

jQuery UI Themes Beginner's Guide
jQuery UI Themes Beginner's Guide

jQuery for Designers: Beginner’s Guide
jQuery for Designers: Beginner’s Guide


Your rating: None Average: 1.3 (4 votes)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Y
g
q
C
f
E
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software