hitooltip
v1.3.0
Published
hitooltip is a lightweight Javascript tooltip library
Downloads
2
Readme
Description
hitooltip is a lightweight Javascript tooltip library
Installation
npm install hitooltipUsage
<!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>
Overview
To run demo:
npm run demo
Options
| 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
📁 package
│
└───📁 dist
│ │
│ └─📝 hitooltip.js
│ └─📝 hitooltip.css