I am using jQuery UI ToolTip like below.
$( document ).tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$(this).css(position);
var txt = $(this).text();
$(this).html(txt);
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
My HTML code is like below.
'<span class="tooltip" title="'+ state.text2 +'">' + state.text + '</span>'
But in this way all the title of the page is showing as ToolTip.
How can I use jQuery UI ToolTip specifically on element with class="tooltip" ?
<!Doctype html>
<html lang = "en">
<head>
<Meta charset = "utf-8">
<Title> jQuery UI tooltip Test</title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<script>
$(function () {
$("#open-event").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> Tooltip test <a id="open-event" href="#" title="tooltip-test"> test </a></p>
</body>
</html>
Consider the following.
$(function() {
$(".tooltip").tooltip({
position: {
my: "center bottom-20",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
var txt = $(this).text();
$(this).html(txt);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
<a href="#" title="Anchor description">Anchor text</a>
<input title="Input help">
<br />
<span class="tooltip" title="Text 2">Text 1</span>
</p>Using the correct Selector, you can target Tooltips for specific elements.