JqueryUI - Tooltip

Advertisements

Previous Page
Next Page  

Tooltip widget of jQueryUI replaces the native tooltips. This widget adds new themes and allows for customization. First let us understand what tooltips are? Tooltips can be attached to any element. To display tooltips, just 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.

jQueryUI provides tooltip() method to add tooltip to any element on which you want to display tooltip. This gives a fade animation by default to show and hide the tooltip, compared to just toggling the visibility.

Syntax

The tooltip() method can be used in two forms −

$ (selector, context).tooltip (options) Method

The tooltip (options) method declares that a tooltip can be added to an HTML element. The options parameter is an object that specifies the behavior and appearance of the tooltip.

Syntax

$(selector, context).tooltip(options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).tooltip({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

Sr.No. Option & Description
1 content

This option represents content of a tooltip. By default its value is function returning the title attribute.

Option - content

This option represents content of a tooltip. By default its value is function returning the title attribute. This can be of type −

  • Function − The callback can either return the content directly, or call the first argument, passing in the content, eg. for ajax content.

  • String − A string of HTML to use for the tooltip content.

Syntax

$(".selector").tooltip(
   { content: "Some content!" }
);
2 disabled

This option when set to true disables the tooltip. By default its value is false.

Option - disabled

This option when set to true disables the tooltip. By default its value is false.

Syntax

$(".selector").tooltip(
   { disabled: true }
);
3 hide

This option represents the animation effect when hiding the tooltip. By default its value is true.

Option - hide

This option represents the animation effect when hiding the tooltip. By default its value is true. This can be of type −

  • Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.

  • Number − The tooltip will fade out with the specified duration and the default easing.

  • String − The tooltip will be hidden using the specified effect such as "slideUp", "fold".

  • Object − Possible values are effect, delay, duration, and easing.

Syntax

$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
4 items

This option indicates which items can show tooltips. By default its value is [title].

Option - items

This option indicates which items can show tooltips. By default its value is [title].

Syntax

$(".selector").tooltip(
   { items: "img[alt]" }
);
5 position

This option decides the position of the tooltip w.r.t the associated target element. By default its value is function returning the title attribute. Possible values are: my, at, of, collision, using, within.

Option - position

This option decides the position of the tooltip w.r.t the associated target element. By default its value is function returning the title attribute. Possible values are: my, at, of, collision, using, within.

Syntax

$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
6 show

This option represents how to animate the showing of tooltip. By default its value is true.

Option - show

This option represents how to animate the showing of tooltip. By default its value is true. This can be of type −

  • Boolean − This can be true or false. When set to true, the tooltip will fade out with the default duration and the default easing.

  • Number − The tooltip will fade out with the specified duration and the default easing.

  • String − The tooltip will be hidden using the specified effect such as "slideUp", "fold".

  • Object − Possible values are effect, delay, duration, and easing.

Syntax

$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
7 tooltipClass

This option is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null.

Option - tooltipClass

This option is a class which can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null.

Syntax

$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
8 track

This option when set to true, the tooltip follows/tracks the mouse. By default its value is false.

Option - track

This option when set to true, the tooltip follows/tracks the mouse. By default its value is false.

Syntax

$(".selector").tooltip(
   { track: true }
);

The following section will show you a few working examples of tooltip functionality.

Default Functionality

The following example demonstrates a simple example of tooltip functionality passing no parameters to the tooltip() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

Let us save the above code in an HTML file tooltipexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example, hover over the links above or use the tab key to cycle the focus on each element.

Use of Content, Track and Disabled

The following example shows the usage of three important options (a) content (b) track and (c) disabled in the tooltip function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

Let us save the above code in an HTML file tooltipexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example, the content of tooltip of first box is set using content option. You can also notice the tooltip follows the mouse. The tooltip for second input box is disabled.

Use of Position

The following example shows the usage of option position in the tooltip function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

Let us save the above code in an HTML file tooltipexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example the tooltip position is set on top of the input box.

$ (selector, context).tooltip ("action", [params]) Method

The tooltip (action, params) method can perform an action on the tooltip elements, such as disabling the tooltip. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.

Basically, here actions are nothing but they are jQuery methods which we can use in the form of string.

Syntax

$(selector, context).tooltip ("action", [params]);

The following table lists the actions for this method −

Sr.No. Action & Description
1 close()

This action closes the tooltip. This method does not accept any arguments.

Action - close()

This action closes the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("close");
2 destroy()

This action removes the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.

Action - destroy()

This action removes the tooltip functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.

Syntax

$(".selector").tooltip("destroy");
3 disable()

This action deactivates the tooltip. This method does not accept any arguments.

Action - disable()

This action deactivates the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("disable");
4 enable()

This action activates the tooltip. This method does not accept any arguments.

Action - enable()

This action activates the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("enable");
5 open()

This action programmatically opens the tooltip. This method does not accept any arguments.

Action - open()

This action programmatically opens the tooltip. This method does not accept any arguments.

Syntax

$(".selector").tooltip("open");
6 option( optionName )

This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.

Action - option( optionName )

This action gets the value associated with optionName for the tooltip. This method does not accept any arguments.

Syntax

var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
7 option()

This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.

Action - option()

This action gets an object containing key/value pairs representing the current tooltip options hash. This method does not accept any arguments.

Syntax

$(".selector").tooltip("option");
8 option( optionName, value )

This action sets the value of the tooltip option associated with the specified optionName.

Action - option( optionName, value )

This action sets the value of the tooltip option associated with the specified optionName.

Syntax

$( ".selector" ).tooltip( "option", "disabled", true );
9 option( options )

This action sets one or more options for tooltip.

Action - option( options )

This action sets one or more options for tooltip.

Syntax

$( ".selector" ).tooltip( "option", { disabled: true } );
10 widget()

This action returns a jQuery object containing the original element. This method does not accept any arguments.

Action - widget()

This action returns a jQuery object containing the original element. This method does not accept any arguments.

Syntax

$(".selector").tooltip("widget");

Examples

Now let us see an example using the actions from the above table. The following example demonstrates the use of actions disable and enable.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

Let us save the above code in an HTML file tooltipexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

In the above example, click on myBtn button and a tooltip pops up.

Event Management on Tooltip elements

In addition to the tooltip (options) method which we saw in the previous sections, JqueryUI provides event methods as which gets triggered for a particular event. These event methods are listed below −

Sr.No. Event Method & Description
1 create(event, ui)

Triggered when the tooltip is created. Where event is of type Event, and ui is of type Object.

Event - create(event, ui)

Triggered when the tooltip is created. Where event is of type Event, and ui is of type Object.

Syntax

$(".selector").tooltip(
   create: function(event, ui) {}
);
2 close(event, ui)

Triggered when the tooltip is closed. Usually triggers on focusout or mouseleave. Where event is of type Event, and ui is of type Object.

Event - close(event, ui)

Triggered when the tooltip is closed. Usually triggers on focusout or mouseleave. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • tooltip − A generated tooltip element.

Syntax

$(".selector").tooltip(
   close: function(event, ui) {}
);
3 open(event, ui)

Triggered when the tooltip is displayed or shown. Usually triggered on focusin or mouseover. Where event is of type Event, and ui is of type Object.

Event - open(event, ui)

Triggered when the tooltip is displayed or shown. Usually triggered on focusin or mouseover. Where event is of type Event, and ui is of type Object.Possible values of ui are −

  • tooltip − A generated tooltip element.

Syntax

$(".selector").tooltip(
   open: function(event, ui) {}
);

Examples

The following example demonstrates event method usage during tooltip functionality. This example demonstrates use of open and close events.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to Howcodex…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

Let us save the above code in an HTML file tooltipexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

In the above example the tooltip for Hover over me! disappear immediately whereas the tooltip for Hover over me too! fades out after duration of 1000ms.

Advertisements