@pro303/tooltip
v0.0.4
Published
PRO303 tooltip
Downloads
293
Readme
Pure JS Tooltip module.
Advantages
- Doesn't use any dependencies.
- The pop-up message does not go off the screen and is positioned so that it can be seen.
Installation
npm install @pro303/tooltipUsage in HTML
You only need 1 file index.js, copy it from dist folder and then import it as a module:
<head>
<script type="module" src="dist/index.js"></script>
</head>
<body>
<div data-tooltip="Tooltip text">Hover over me</div>
</body>Add data-tooltip="Tooltip text" attribute to any tag.
Usage as module
import {Tooltip} from "@pro303/tooltip";
const tooltip = new Tooltip();Options
className- className of Tooltip popup (is used in CSS styling).hoverTimeToShow- how much time to hover to begin showing tooltip (default 1000 (1s)).tooltipXOffset, tooltipYOffset- X, Y offset when showing tooltip (default 0).trackMouseMove(true / false) - if true tooltip moves behind the mouse within the currently hovered block (default = true).
Styles
Default styles for Tooltip Popup are included in styles.css file.
._pro303TooltipPopup {
display: inline-block;
position: absolute;
border: 1px solid #8c8c8c;
padding: 5px;
}