jQueryUI - Day 12 (Tooltips)

Article

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.