English 中文(简体)
JqueryUI - Tooltip
  • 时间:2024-11-03

JqueryUI - Tooltip


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 pttle 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 toggpng the visibipty.

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 psts the different options that can be used with this method −

Sr.No. Option & Description
1

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

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

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 "spdeUp", "fold".

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

Syntax

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

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

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, colpsion, 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, colpsion, using, within.

Syntax

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

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 "spdeUp", "fold".

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

Syntax

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

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-stypng" } }
);
8

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

Default Functionapty

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionapty</title>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/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 −