Introduction:
In this article we will explain how show tooltip on mouse hover in html jQuery.
Description:
The jquery.adaptip.js used to show tooltip popup on mouse hover in html.
Just another jQuery based tooltip popup plugin which has the ability to automatically set the placement direction based on the position of the matched element.
Click here to download it.
Let’s see an example of tooltip popup using jQuery plugin:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>index</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/jquery.adaptip.min.js"></script>
<link href="~/style.adaptip.min.css" rel="stylesheet" />
</head>
<body>
<div>
<span data-tp-title="<b>Title</b>"
data-tp-desc="this is content description">
Hover Me
</span>
</div>
<script>
$("span").adapTip({
// top, bottom, left, right, top right, top left, right bottom, left bottom
"placement": "auto"
});
</script>
</body>
</html>
Output:
I hope it will help you after reading it.
Leave a Comment