jQueryUI - Day 12 (Tooltips)

Before reading this article, I highly recommend reading the previous parts of the series:

Tooltip is used to display some additional information related to any element, on mouse over event tooltip show the text. To display tooltips, just add title attribute to input elements and title attribute value will be used as tooltip. jQueryUI provide a customizable, themeable tooltips that replace the native tooltips. jQueryUI provides tooltip() method to add tooltip to any element on which you want to display tooltip.

Syntax:

$(selector, context).tooltip(options)

Or

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

Example:

<!DOCTYPEhtml>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function ()
{
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
$("#tooltip-3").tooltip();
});
</script>
<style>
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 20px;
height: 450px;
width: 800px;
text-align: center;
margin-left: 150px;
padding-left: 100px
}
</style>
</head>
<body>
<div id="div1"> <span>************Tooltip*************</span>
<table>
<tr>
<td><span>Name:</span></td>
<td>
<input id="tooltip-1" type="text" title="Enter Your Name" />
</td>
</tr>
<tr>
<td><span>City:</span></td>
<td>
<input type="text" id="tooltip-2" title="Enter Your City" />
</td>
</tr>
<tr>
<td>
<input type="button" id="tooltip-3" value="Submit" title="Click! If You Want to Submit" />
</td>
</tr>
</table>
</div>
</body>
</html>

Output

Run program

Options

Option	Description	Example
content	Represents content of a tooltip. By default value is function returning the title attribute.	$("#tooltip-1").tooltip({ content: "Create title!" })
disabled	If set to true, disables the tooltip	$("#tooltip-1").tooltip({ disabled: true })
hide	Represents the animation effect during hiding the tooltip. By default its value is true.	$("#tooltip-1").tooltip({ hide: { effect: "explode", duration: 800 }})
items	Define which items can show tooltips if you're using something other than the title attribute for the tooltip content. By default its value is title.	$("#tooltip-1").tooltip({items: "img[alt]"})
position	Identifies the position of the tooltip in relation to the associated target element.	$("#tooltip-1").tooltip({position: { my: "left+15 center", at: "right-10 center" }})
show	Represents the animation effect during showing the tooltip. By default its value is true.	$("#tooltip-1").tooltip({ show: { effect: "explode", duration: 800 }})
tooltipclass	Define which class can be added to the tooltip widget for tooltips such as warning or errors. By default its value is null.	$("#tooltip-1").tooltip({ tooltipClass: "custom-tooltip-styling" })
track	Define whether the tooltip should track (follow) the mouse. By default value is false.	$("#tooltip-1").tooltip({ track: true })

Methods

Method	Description	Example
close()	Closes a tooltip.	$("#tooltip-1").tooltip("close")
destroy()	Removes the tooltip functionality completely. This will return the element back to its pre-init state	$("#tooltip-1").tooltip("destroy")
disable()	Disables the tooltip.	$("#tooltip-1").tooltip("disable")
enable()	Enables the tooltip.	$("#tooltip-1").tooltip("enable")
instance()	Retrieves the tooltip's instance object.	$("#tooltip-1").tooltip("instance")
open()	Programmatically open a tooltip.	$("#tooltip-1").tooltip("open")
option(option_name)	Gets the value currently associated with the specified optionName.	varobj=$("#tooltip-1").tooltip("option","Tooltipclass")
option()	Gets an object containing key/value pairs representing the current tooltip options	varobj=$("#tooltip-1").tooltip("option")
option(option_name,value)	Sets the value of the tooltip option associated with the specified optionName.	$("#tooltip-1").tooltip("option","disabled",true)
widget()	Returns a jQuery object containing the original element.	varobj=$("#tooltip-1").tooltip("widget")

Events

Event	Description	Example
close(event,ui)	Triggered when a tooltip is closed, triggered on focusout or mouseleave.	$("#tooltip-1").tooltip({ close: function (event, ui) { } })
create(event,ui)	Triggered when the tooltip is created.	$("#tooltip-1").tooltip({ create: function (event, ui) { } })
open(event,ui)	Triggered when a tooltip is shown, triggered on focusin or mouseover.	$("#tooltip-1").tooltip({ open: function (event, ui) { } })

Let us take some example.

Example 1:

<!DOCTYPEhtml>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function ()
{
var obj = $("#tooltip-1").tooltip(
{
content: "<h6 style=\"color:yellow ;background-color:#37BFB3\">Enter Your Name</6>",
hide:
{
effect: "explode",
duration: 600
},
position:
{
my: "left+12 center",
at: "right+5 center"
}
})
$("#tooltip-2").tooltip();
$("#tooltip-3").tooltip();
});
</script>
<style>
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 20px;
height: 450px;
width: 800px;
text-align: center;
margin-left: 150px;
padding-left: 100px
}
</style>
</head>
<body>
<div id="div1"> <span>************Tooltip*************</span>
<table>
<tr>
<td><span>Name:</span></td>
<td>
<input id="tooltip-1" type="text" title="Enter Your Name" />
</td>
</tr>
<tr>
<td><span>City:</span></td>
<td>
<input type="text" id="tooltip-2" title="Enter Your City" />
</td>
</tr>
<tr>
<td>
<input type="button" id="tooltip-3" value="Submit" title="Click! If You Want to Submit" />
</td>
</tr>
</table>
</div>
</body>
</html>

Output

run

In above example we define a custom content for tooltip. In Content of tooltip we create a header tag and assign value for background-color and color css property. We also assign the position parameter and hide animation.

Example 2

<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js">
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(document).ready(function ()
{
var obj = $("#tooltip-1").tooltip(
{
content: "<h6 style=\"color:yellow ;background-color:#37BFB3\">Enter Your Name</6>",
hide:
{
effect: "explode",
duration: 600
},
position:
{
my: "left+12 center",
at: "right+5 center"
},
track: true,
show:
{
effect: "slideDown",
duration: 700
},
open: function (event, ui)
{
ui.tooltip.hover(function ()
{
$(this).fadeTo("slow", 0.3);
});
}
})
$("#tooltip-2").tooltip(
{
track: true
});
$("#tooltip-3").tooltip(
{
track: true
});
$("#tooltip-3").click(function ()
{
$('#tooltip-1').tooltip("open");
})
});
</script>
<style>
body {
margin-top: 100px;
}
.ui-tooltip-content::after {
content: "";
position: absolute;
border-style: solid;
display: block;
left: 90px;
}
.ui-tooltip-content::before {
bottom: -10px;
border-color: #AAAtransparent;
border-width: 10px10px0;
}
.ui-tooltip-content::after {
bottom: -7px;
border-color: whitetransparent;
border-width: 10px10px0;
}
#div1 {
background-color: coral;
color: ButtonHighlight;
font-size: 20px;
height: 450px;
width: 800px;
text-align: center;
margin-left: 150px;
padding-left: 100px
}
</style>
</head>
<body>
<div id="div1"> <span>************Tooltip*************</span>
<table>
<tr>
<td><span>Name:</span></td>
<td>
<input id="tooltip-1" type="text" title="Enter Your Name" />
</td>
</tr>
<tr>
<td><span>City:</span></td>
<td>
<input type="text" id="tooltip-2" title="Enter Your City" />
</td>
</tr>
<tr>
<td>
<input type="button" id="tooltip-3" value="Submit" title="Click! If You Want to Submit" />
</td>
</tr>
</table>
</div>
</body>
</html>

Output

Output

In this example we defined the content, hide, position, track, show and options for tooltip. We also assigned the open event, that will be triggered when tooltip dialog box will open. We create a click event for button, on the click event of button we open the tooltip’s dialog box.

13 Comments

Join the conversation! Your thoughts help the community grow.

Khawar Islam10y ago
Nice
Santhakumar Munuswamy10y ago
Thanks for nice article
Arul R10y ago
Nice
Pankaj Kumar Choudhary10y ago
Thanks Debasis Saha Sir...........
Debasis Saha10y ago
Nice..
Pankaj Kumar Choudhary10y ago
Thanks Manoj Kalla Sir.............
Pankaj Kumar Choudhary10y ago
Thanks Raja T.............
Pankaj Kumar Choudhary10y ago
Thanks Aqib Shehzad Sir...........
Manoj Kalla10y ago
Good one, thanks for sharing
Raja T10y ago
Nice, Thanks for sharing
Praveen Kumar10y ago
Nice..Pankaj! can we put any amount of html inside the tooltip content?
- Pankaj Kumar Choudhary10y ago
  Hello P K Yadav Sir! i don't know the exact amount of html that can insert into tooltip content but we can put a complete div that contain tables , textbox and other html elements like form. compare to default tooltip we can insert more and complex data into tooltip.........
Muhammad Aqib Shehzad10y ago
good series of articles