The jQuery UI Tooltip-Learn to Create Tooltips in Jquery

jquery ui tooltipA tooltip is a tiny pop-up that appears when your mouse pointer hovers over an element such as a label, a button or a textbox – given that these elements have implemented the jQuery UI Tooltip library. It contains text content that describes the purpose or function or the element being pointed at for a specified amount of time. It relies on being focused upon, so if the cursor leaves the area of the element, the pop-up disappears.

New to Jquery? Take a course at Udemy

The jQuery UI Tooltip

Tooltips can contain one or more lines of text. You can use more than text. You can also have images, shapes or other visual content. The code can be attached to any element, so you can provide needed information to your users regarding anything that can be found on your page.

Introduced way back during the times of HTML3, tooltips are a common user interface element. Native tooltips are great for quick text and tips. However, its style and physical appearance cannot be customized. The look is consistent across browsers and operating systems. Fortunately, when jQuery UI 1.9 was released, it included a new tooltip widget, which was very much customizable and allowed developers to incorporate different styles.

How to Create a Basic Tooltip

jQuery’s tooltip widget was created to replace the native style of creating tooltips. It is conveniently able to recognize the same mark-up pattern that browsers use to create tooltips. This is the title attribute. For example:

<input type=”text” id=”elementID” title=”This is a sample tooltip.”>

This will allow the user to view a tooltip with the text specified when hovering over a text input element in the UI. In this example, the identifier, “elementID” is used. To apply the tooltip widget to your text input, you can use the following line of code:

$(function() {  $( ‘#elementID’ ).tooltip();});

Replacing the Basic Tooltip

You don’t have to over-exert yourself in coding only simple and basic tooltips manually, especially when there is already the jQuery UI Tooltip around to make things easy for you.

A very handy shortcut that you can use is the widget’s feature that not only calls the tooltip method on individual UI elements, but also calls the said method for any descendant element with a title attribute. In other words, if you have a div container that has for example, two (2) text input elements, calling the tooltip() method for the div container will invoke tooltip() in both the text input instances within the container. Here’s the sample code:

<div id=”sampleContainer”>

<input type=”text” title=”Sample descendant 1″>

<input type=”text” title=”Sample descendant 2″>

</div>

<script>

$(function() {    $( ‘#sampleContainer’ ).tooltip();  });

</script>

Customizing Tooltips

Constantly using basic tooltips can be boring. Also, if you’re using a rather colorful or unique website design, the simple tooltips may look out of place. So now that you have been exposed to the creation of tooltips, you can customize them. Conveniently, the jQuery tooltip widget has a variety of styles and options for customized visual display.

Learn more about Jquery Ui widgets with a class at Udemy.com.

Tooltips have the “ui-tooltip” class that you can use to apply custom styling. For example, if you need a tooltip with the color green to match the website, you can use the code as below:

.ui-tooltip { background: green;  color: black;}

Still, if you are not interested in handling all the design details yourself, jQuery UI has a large collection of readily available styles you can choose from like humanity, le-frog or ui-darkness. There is also an application that you can use to customize the looks of all the tooltips in your web page – ThemeRoller.

There will be times when you wouldn’t want to use the same tooltip style for all your tooltip elements. To customize specific tooltips, you just need to specify the element’s id so the widget will recognize which one you’re trying to apply the style to:

<input type=”text” id=”sampleTooltip” title=”This is a sample tooltip title!”>

<script>  $( ‘#sampleTooltip).tooltip({    tooltipClass: ‘greenTooltip’  }); </script>

The script above will not affect any other tooltip you have in your project.

Showing and Hiding Your Tooltips

Of course, styling your tooltips isn’t everything for customization. You also need to handle the events associated with the tooltips such as showing and hiding them. The native ones, by default, show up for about one second and then automatically disappear. Using the tooltip widget, you can customize even how and when to show your tooltips.

$( sampleDoc ).tooltip({  show: 300,  hide: 1000});

The sample code above shows the code for customizing how to display your tooltip. By passing simply numbers to the method, it will interpret the values as the time to show your tooltip (will show after hovering for 300 milliseconds) and the time to hide your tooltip (will hide after 1000 milliseconds).

You can also pass string values. With this, you can specify animations that you wish to use in showing/hiding your tooltips. Here is an example:

$( sampleDoc ).tooltip({  show: ‘swing’,  hide:’ bounce’});

There’s also the option of customizing even the show and hide styles specifically:

$( sampleDoc ).tooltip({  show: {    duration: 1000,    effect: ‘puff’,    easing: ‘fadeOut’  }});

Don’t worry if you didn’t pass or you don’t know what to pass as parameters. If you can’t decide, there are always the default styles that will be automatically used by the widget in case you didn’t specify them.

Getting started with  jQuery? Take a course at Udemy.com.

The look and feel of your web page will always rely on how you put together different styles and designs. Fonts, colors, sizes, positioning and even the smallest of details are important. Tooltips may not always be visible, but it’s always nice to see that it fits perfectly with the rest of your page when they do.

A Little Extra Information about jQuery

jQuery is a rich library of JavaScript that is intended to make web development fast and concise. Created by John Resig in 2006, it simplifies Ajax interactions, HTML document saving, event handling, animating – making the web development process a lot quicker.

It is cross-platform so you don’t have to worry about porting to different browsers. The jQuery toolkit was designed to let developers complete various tasks with considerably less code. It supports CSS3 selectors and XPath syntax. With around a 19KB lightweight library, it can already provide you a lot of different libraries especially for UI development to help you make your pages more appealing and worthwhile to your users.