tooltips

Tooltip using jQuery UI library

Tooltips can be attached to any element. To display tooltips, one need to add title attribute to input elements and title attribute value will be used as tooltip. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element.

I had already posted that jQuery UI 1.90 is released and there are some widgets which are introduced with jQuery UI 1.90. One of the new widget is Tooltip. In this post, you will learn how to create tooltip using jQuery UI library.

Create Tooltip

To display tooltip, jQuery UI library provide tooltip() which should be called on element on which you want to display tooltip. So if you want to display tooltip for all elements of the page, then you can call tooltip() on document object.

$(function() {
    $(document).tooltip();
});

If you are interested to display tooltip to any specific element then all you need to do is to change your selector. For example, below code will associate tooltip with input element with IDtxtName“.

$(function() {
    $('#txtName').tooltip();
});

Move Tooltip with mouse

jQuery UI Tooltip widget has a property called “track“, which is when set to true then tooltip follows the mouse. By default it is false.

Below jQuery code, will set this property to true which makes tooltip to follow the mouse.

$(function() {
 $(document).tooltip({
 track:true
 });
 });

Show and Hide Tooltip with Animation

By default, the jQuery UI Tooltip is displayed without any animation. But do you know that you can animate the tooltip while showing and on hiding? Yes, It’s Possible. In this post, You will see that how that can be done.

jQuery UI Tooltip widget provides 2 options to animate the tooltip while showing and hiding.

  • show: When set to false, no animation and the tooltip will be shown immediately. When set to true, the tooltip will fade in with the default duration and the default easing.
  • hide: When set to false, no animation and the tooltip will be hidden immediately. When set to true, the tooltip will fade out with the default duration and the default easing.

So, below jQuery code will show the tooltip using “slidedown” effect with the delay of 250 ms.

$("#aSlideDown").tooltip({
    show: {
        effect: "slideDown",
        delay: 250
    }
});

As I mentioned earlier, different animation effect can be provided while showing and hiding the tooltip. So below jQuery code will show tooltip using “fold” effect and hide using “shake” effect.

$("#aFoldandShake").tooltip({
    show: {
         effect: "fold",
         delay: 250
    },
    hide: {
        effect: "shake",
        delay: 250
   }
});

You can use any of the below value for effect property.

  • blind
  • bounce
  • clip
  • drop
  • explode
  • fade
  • fold
  • highlight
  • puff
  • pulsate
  • scale
  • shake
  • size
  • slideDown

Change Tooltip font style

To change or override the default font style, update the “.ui-tooltip” class and add your desired font and font-size.

.ui-tooltip
{
    <strong>font</strong>-size:10pt;
    <strong>font</strong>-family:Calibri;
}

Related Posts


One thought on “Tooltip using jQuery UI library

  1. compare fuel

    Hello There. I discovered your blog using msn. That is an extremely well written article. I will make sure to bookmark it and come back to read more of your helpful information. Thank you for the post. I’ll certainly comeback.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*