jQuery UI Tooltip: A Quick and Easy Way to Enhance Element Explanations

Tooltips are important for giving users extra information and improving their experience on a website or app. When you add a tooltip to an element, it shows a brief description or extra details about that element.

Tooltips are useful for explaining button functions, helping users with input values, or giving helpful hints.

In this tutorial, I show how you can add jQuery UI tooltip to an HTML control like – label, input element, span, paragraph, etc.

Table of Content

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

1. Download and Include jQuery UI library

• Download the jQuery UI from its Offical website.
• Include jQuery UI CSS and script file in your page with the jQuery library.

<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- jQuery UI JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Initialize jQuery UI tooltip

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();
});

View Demo

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 });
});

View Demo

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();

View Demo

Events

Some events are –

• close(event, ui)

It triggered when the mouse leaves from control.

Syntax –

$( selector).tooltip({
     close: function( event, ui ) { // action }
});

$( selector ).on( "tooltipclose", function( event, ui ) { // action } );

$( selector ).tooltip({
     create: function( event, ui ) { // action }
});

$( selector ).on( "tooltipcreate", function( event, ui ) { // action } );

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

$( selector ).on( "tooltipopen", function( event, ui ) { // action } );