Easily add Tooltip to the control using jQuery UI Plugin

Add tooltip widget to the control or an element to show a short description or some additional information about the control e.g. – what it does, what values the users can input on it.

It will show when the user moves the mouse pointer over the element.

In this tutorial, I am using jQuery UI to add tooltip that can be attached to any HTML control like – label, input element, span, paragraph, etc.

Easily add Tooltip to the control using jQuery UI Plugin


Contents

  1. Download and Include
  2. Initialize
  3. Customizing tooltip
  4. Conclusion

1. Download and Include

  • Download the jQuery UI from its Offical website.
  • Include jQuery UI CSS and script file in your page with the jQuery library.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

2. Initialize

Create the elements and specify title attribute to set tooltip message.

HTML

<div class='container'>
 
 <input id="name" title="Enter your name"><br>
 <p id='p' title='paragraph tooltip'>Paragraph</p><br/>
 <span id='span' title='span tooltip'>Span tooltip</span><br/>
 <label id='label' title='label tooltip'>Label tooltip</label><br/>
 <input type='button' value='Click' title='Click me'>
 
</div>

jQuery

Call tooltip() method on document selector.

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

Output –

Hover on an element.


3. Customizing tooltip

Customize tooltip using options, methods, and events.

Options

Some options are –

  • content

Set or get the title of control. You can either use a string or string HTML for value.

Syntax – Set

$(selector).tooltip({
    content: string
});

Or

$( selector ).tooltip( "option", "content", string );

Syntax – Get

$( selector ).tooltip( "option", "content" );

Example –

$(document).ready(function(){
   $('#content').tooltip({ content:'Tooltip title changed.' });
});
  • disabled

It disables(remove title attribute) tooltip from the control and its default is false for disabling pass true.

Syntax – Set

$(selector).tooltip({
    disabled: false[ or true]
});

Or

$( selector ).tooltip( "option", "disabled", string );

Syntax – Get

$( selector ).tooltip( "option", "disabled" );

Example –

$(document).ready(function(){
   $('#disabled').tooltip({ disabled:true });
});
  • track

It takes a boolean value and is used to allow tooltip to follow mouse pointer by setting it to true otherwise false.

Syntax – Set

$(selector).tooltip({
    track: false[ or true]
});

Or

$( selector ).tooltip( "option", "track", true or false );

Syntax – Get

$( selector ).tooltip( "option", "disabled" );

Example –

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

Demo

Move the mouse pointer over the text.

Methods

Some methods are –

  • destroy()

It removes tooltip from the control. It doesn’t take any arguments.

Example –

$("#destroy").click(function(){
 $( "#fullname" ).tooltip( "destroy" );
});
  • disable()

Disable the tooltip. It also doesn’t take any arguments.

Example –

$("#disable").click(function(){
   $( "#fullname" ).tooltip( "disable" );
});
  • enable()

Enable the disabled tooltip. It doesn’t take any arguments.

Example –

$("#enable").click(function(){
   $( "#fullname" ).tooltip( "enable" );
});
  • open()

Programmatically opens the tooltip of the control. It also doesn’t take any arguments.

Example –

$("#open").click(function(){
   $( "#span_open" ).tooltip( "open" );
});

NOTE – Before calling method on a control it must initialize on ready state otherwise it wouldn’t work.

For example – $(‘#fullname’).tooltip();

Demo

Events

Some events are –

  • close(event, ui)

It triggered when the mouse leaves from control.

Syntax –

$( selector).tooltip({
 close: function( event, ui ) { // action }
});
Bind it to the control
$( selector ).on( "tooltipclose", function( event, ui ) { // action } );
  • created(event, ui)

It triggered when tooltip created.

Syntax –

$( selector ).tooltip({
create: function( event, ui ) { // action }
});
Bind it to the control
$( selector ).on( "tooltipcreate", function( event, ui ) { // action } );
  • open(event, ui)

Triggered on mouseover tooltip control.

Syntax –

$( selector ).tooltip({
open: function( event, ui ) { // action }
});
Bind it to the control
$( selector ).on( "tooltipopen", function( event, ui ) { // action } );

4. Conclusion

Tooltip best way to show the short description of an element to the user on hover on an element. It gives an idea of what this control does.

By using jQuery UI you can easily implement within your project and customize it.

Follow this link for learning more about it.

You can also check my earlier post on add tooltip with Bootstrap.

If you like this post share it with your friends or share it on social media.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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