We can show tooltip using jquery as given Below:
1.
By Clicking on Div:
<div id="dvToolTip">Click here to show Tooltip</div>
|
CDN used:
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
|
Jquery Script:
<script>
$(function () {
$('#dvToolTip').on({
"click": function () {
$(this).tooltip({ items: "#dvToolTip", content: "This jquery code is used
to show tooltip on click" });
$(this).tooltip("open");
},
"mouseout": function () {
$(this).tooltip("disable");
}
});
});
</script>
|
2.
By Clicking on Anchor Tag or link:
<a href="#" title="This jquery code is used to show tooltip on
click">Click here to show Tooltip</a>
|
CDN Used:
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
|
Jquery Script:
<script>
$(function () {
$('a').tooltip({
disabled: true,
close: function (event, ui) {
$(this).tooltip('disable'); }
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});
});
</script>
|
Result:
