<!DOCTYPE html>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
title
>jQuery jTippy Tooltip Plugin</
title
>
<
meta
name
=
"description"
content
=
"jQuery tooltip plugin"
/>
<
meta
content
=
"width=800, initial-scale=1"
name
=
"viewport"
/>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin
=
"anonymous"
/>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
"jTippy.css"
/>
<
script
src
=
</
script
>
<
script
src
=
"jTippy.min.js"
></
script
>
<
style
>
body,
html {
height: 100%;
margin: 0px;
font-family: Arial;
}
</
style
>
</
head
>
<
body
class
=
"body text-center"
>
<
h2
style
=
"color: green;"
>
GeeksForGeeks
</
h2
>
<
b
>jQuery jTippy tooltip plugin </
b
>
<
p
></
p
>
<
a
href
=
"#"
data-toggle
=
"tooltip"
title="A Tooltip is used to provide interactive
textual hints to the user about the element
when the mouse pointer moves over. Tooltip is
quite useful for displaying the description of
different elements in the webpage.">
Hover or Focus to see tooltip
</
a
>
<
div
id
=
"showDivID"
></
div
>
<
script
>
$(function () {
$('[data-toggle="tooltip"]')
.jTippy({
title: "Trying out jTippy tooltips",
// The tooltip is displayed on mouse
// over and focus event
trigger: "hoverfocus",
size: "medium",
position: "auto",
backdrop: false,
theme: "black",
singleton: true,
close_on_outside_click: true,
})
.on("jt-show", function (e, tooltip, hide) {
// triggered on show tooltip ;
$("#showDivID").html(
"Show tooltip event is triggered");
})
.on("jt-hide", function (e) {
//triggered on tooltip hide
$("#showDivID").hide();
});
});
</
script
>
</
body
>
</
html
>