hitooltip is a lightweight Javascript tooltip library
npm install hitooltip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="dist/hitooltip.min.css" rel="stylesheet">
</head>
<body>
<div class="example" data-hitooltip="Example">Hover examples</div>
<br/>
<br/>
<script src="dist/hitooltip.min.js" type="module"></script>
</body>
</html>
To run demo:
npm run demo
name | description | default | expect | HTML Attribute |
---|---|---|---|---|
delay | Delay before displaying tooltip | 250ms | number | data-hitooltip-delay |
speed | Animation duration for the transition to happen | 500ms | number | data-hitooltip-speed |
timeout | Tooltip lifetime | 3000ms | number | data-hitooltip-timeout |
maxViews | Number of times a tooltip can appear on the element | 0 (unlimited) | number | data-hitooltip-max-views |
animationType | Animation type | "smooth" | "smooth", "fade" or "none" | data-hitooltip-animation-type |
dynamicMonitoring | Whether to consider elements added dynamically | "body" | string (selector) | N/A |
onHide, onHidden, onShow, onShown | callbacks | N/A |
example to set options globally
import {setHiTooltipOptions} from "hitooltip";
setHiTooltipOptions({ speed: 250, maxViews: 10 });
setHiTooltipOptions({ dynamicMonitoring: "" });
example to set options locally
<div class="example" data-hitooltip="Example" data-hitooltip-timeout="10000" data-hitooltip-max-views="2">Hover
examples</div>
📁 package
│
└───📁 dist
│ │
│ └─📝 hitooltip.js
│ └─📝 hitooltip.css