jQueryUI Tooltip Plugin With Examples [Latest]

In this post, we will look into the details of jQueryUI Tooltip plugin. We can attach tooltip to any element and when the mouse pointer is over that element, the title attribute is shown in a small box next to it. This is often used with form elements to provide additional information for the users.

The Tooltip plugin is used to replace the native tooltips. We can customize the tooltip with different options, methods and events to improve the user experience.

Tooltip Plugin Options

In this section, we will discuss about different options available to customize the jQueryUI Tooltip plugin. We have used many of these options in the Tooltip Plugin in Action section.

Options	Syntax	Description
content	$( “.selector” ).tooltip({ content: “Superb!” });	Set the content of the Tooltip
disabled	$( “.selector” ).tooltip({ disabled: true });	Tooltip will be disabled, if it is set to true.
hide	$( “.selector” ).tooltip({ hide: { effect: “explode”, duration: 500 } });	This option is used to animate the Tooltip on hide.
items	$( “.selector” ).tooltip({ items: “img[alt]” });	This option is used to specify which items should display tooltip.
position	$( “.selector” ).tooltip({ position: { my: “left+15 center”, at: “right center” } });	This option is used to identify the position of the tooltip in relation to the selected element..
show	$( “.selector” ).tooltip({ show: { effect: “blind”, duration: 800 } });	This option is used to animate the tooltip on open.
tooltipClass	$( “.selector” ).tooltip({ tooltipClass: “custom-tooltip-styling” });	This option is used to customize the tooltip by adding class to the tooltip widget.
track	$( “.selector” ).tooltip({ track: true });	This option is used to specify whether the tooltip should follow the mouse

The above table briefly describes all the available options in the jQueryUI Tooltip plugin.

Tooltip Plugin Methods

In this section, we will look into the jQueryUI Tooltip plugin methods and its syntax. These methods are very useful when you deal with the Tooltip plugin.

Methods	Usage	Description
close()	$( “.selector” ).tooltip( “close” );	This method is used to close the tooltip. Called only for non-delegated tooltips.
destroy()	$( “.selector” ).tooltip( “destroy” );	This method will remove the tooltip functionality completely.
disable()	$( “.selector” ).tooltip( “disable” );	This method is used to disable the tooltip
enable()	$( “.selector” ).tooltip( “enable” );	Used to enable the tooltip.
instance()	$( “.selector” ).tooltip( “instance” );	Used to get the tooltip’s instance object.
open()	$( “.selector” ).tooltip( “open” );	This method is used to open the tooltip programmatically. Called only for non-delegated tooltips.
option( optionName, value )	$( “.selector” ).tooltip( “option”, “disabled”, true );	Used to set the value of the tooltip associated with the optionName
widget()	$( “.selector” ).tooltip( “widget” );	Used to get the jQuery Object containing the tooltip element.

The above table briefly describes all the available methods in the jQueryUI Tooltip plugin.

Tooltip Plugin Events

In this section, we will discuss about different events associated with jQueryUI Tooltip plugin. We have used many of these events in the Tooltip Plugin in Action section.

Events	Usage	Description
close( event, ui )	$( “.selector” ).tooltip({,close: function( event, ui ) {}});	This is fired when the tool tip is closed or when the focusout or mouseleave event is fired.
create( event, ui )	$( “.selector” ).tooltip({,create: function( event, ui ) {}});	This is fired when the Tooltip is created.
open( event, ui )	$( “.selector” ).tooltip({,open: function( event, ui ) {}});	This event is triggered when the mouse pointer is over the element, that is when it is displayed.

The above table briefly describes all the available events in the jQueryUI Tooltip plugin.

Tooltip Plugin in Action

In this section, we will try different examples to explore the uses of jQueryUI Tooltip plugin.

Default Functionality

The following example demonstrates the default functionality of jQueryUI Tooltip plugin.


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Tooltip– Default Functionality&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( document ).tooltip();
  });
  &lt;/script&gt;
  &lt;style&gt;
  	label {
    	display: inline-block;
    	width: 5em;
  	}
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input id="name" title="Enter your name"&gt;
&lt;p&gt;&lt;a href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar"&gt;JournalDev&lt;/a&gt; tutorials for all your requirements.&lt;p&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Tooltip– Default Functionality</title>

$(function() {

$( document ).tooltip();

});

</script>

<style>

label {

display: inline-block;

width: 5em;

}

</style>

</head>

<body>

<p><a href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar">JournalDev</a> tutorials for all your requirements.<p>

</body>

</html>

You will see the tooltip when you hover the input field and the link shown below.

Tooltip with Animation

The following example demonstrates how we could animate the tooltip plugin. We use hide and show options to animate the tooltip. You can also find the use of the option position and the open event in this example.


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Tooltip - Animation&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( "#name" ).tooltip({
      show: {
        effect: "slideDown",
        delay: 200
      }
    });
    $( "#link-tooltip" ).tooltip({
      hide: {
        effect: "explode",
        delay: 200
      }
    });
    $( "#city" ).tooltip({
      show: null,
      position: {
        my: "left top",
        at: "left bottom"
      },
      open: function( event, ui ) {
        ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
      }
    });
  });
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;&lt;label for="name"&gt;Name :&lt;/label&gt;
&lt;input id="name" title="Enter your name"&gt;
&lt;p&gt;&lt;label for="city"&gt;City :&lt;/label&gt;
&lt;input id="city" title="Enter your City"&gt;
&lt;p&gt;&lt;a  id="link-tooltip" href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar"&gt;JournalDev&lt;/a&gt; tutorials for all your requirements.&lt;p&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Tooltip - Animation</title>

$(function() {

$( "#name" ).tooltip({

show: {

effect: "slideDown",

delay: 200

}

});

$( "#link-tooltip" ).tooltip({

hide: {

effect: "explode",

delay: 200

}

});

$( "#city" ).tooltip({

show: null,

position: {

my: "left top",

at: "left bottom"

open: function( event, ui ) {

ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );

}

});

</script>

</head>

<body>

<p><a id="link-tooltip" href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar">JournalDev</a> tutorials for all your requirements.<p>

</body>

</html>

You can now play with output.

Tooltip using `track` option

The following example demonstrates the use of track option. You will see the Tooltip following the mouse when you move over the fields.


&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Tooltip – Track Mouse&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( document ).tooltip({
      track: true
    });
  });
  &lt;/script&gt;
  &lt;style&gt;
    label {
        display: inline-block;
        width: 5em;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input id="name" title="Enter your name"&gt;
&lt;p&gt;&lt;a href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar"&gt;JournalDev&lt;/a&gt; tutorials for all your requirements.&lt;p&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<html>

<head>

<title>jQuery UI Tooltip – Track Mouse</title>

$(function() {

$( document ).tooltip({

track: true

});

</script>

<style>

label {

display: inline-block;

width: 5em;

}

</style>

</head>

<body>

<p><a href="https://www.journaldev.com/5910/#" title="JournalDev by Pankaj Kumar">JournalDev</a> tutorials for all your requirements.<p>

</body>

</html>

You will see the Tooltip following the mouse when you move over the fields.

That’s all for now and you will see more in the coming posts.

jQueryUI Tooltip Plugin With Examples [Latest]

Byadmin

Contents

Tooltip Plugin Options

Tooltip Plugin Methods

Tooltip Plugin Events

Tooltip Plugin in Action

Default Functionality

Tooltip with Animation

Tooltip using `track` option

Like this:

By admin

Related Post

How to get an element with a specific index in jQuery With Example [Latest]

Find all the descendants of an element in jQuery With Example [Latest]

jQuery UI Button and Buttonset Widget With Examples [Latest]

Leave a ReplyCancel reply

You missed

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

How to Generate XML from XSD in Eclipse Example [Latest]

Queue Implementation in Java using Array With Examples [Latest]

Depth First Search (DFS) for a Graph With Examples [Latest]

Byadmin

Contents

Tooltip Plugin Options

Tooltip Plugin Methods

Tooltip Plugin Events

Tooltip Plugin in Action

Default Functionality

Tooltip with Animation

Tooltip using track option

Share this:

Like this:

By admin

Related Post

Leave a ReplyCancel reply

You missed

Tooltip using `track` option