@substrate-system/tool-tip
v0.0.5
Published
Tooltips for when you hover
Downloads
266
Readme
tool-tip
Webcomponent for tooltips — text when you hover.
Install
npm i -S @substrate-system/tool-tipExample
<tool-tip content="This is a tooltip">
<!-- put the target as a child of tool-tip -->
<button>Hover me</button>
</tool-tip>API
This exposes ESM and common JS via
package.json exports field.
ESM
import { ToolTip } from '@substrate-system/tool-tip'Common JS
require('@substrate-system/tool-tip')Attributes
| Attribute | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| content | string | "" | The text content of the tooltip. |
| placement | Placement | "top" | Where to place the tooltip relative to the target. |
| trigger | string | "hover focus" | Space-separated list of triggers: hover, focus, click, manual. |
| disabled | boolean | false | If true, the tooltip will not be shown. |
| distance | number | 8 | Distance in pixels from the target. |
| skidding | number | 0 | Lateral offset in pixels. |
| delay | number | 0 | Delay in milliseconds before showing the tooltip on hover. |
| hoist | boolean | false | If true, the tooltip will be appended to document.body. |
CSS
Import CSS
import '@substrate-system/tool-tip/css'Or minified:
import '@substrate-system/tool-tip/min/css'Use
This calls the global function customElements.define. Just import, then use
the tag in your HTML.
The target, or the element with the tooltip, should be the child of a
tool-tip element.
JS
import '@substrate-system/tool-tip'HTML
<tool-tip content="This is a tooltip">
<!-- put the target as a child of tool-tip -->
<button>Hover me</button>
</tool-tip>pre-built
This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
copy
cp ./node_modules/@substrate-system/tool-tip/dist/index.min.js ./public/tool-tip.min.js
cp ./node_modules/@substrate-system/tool-tip/dist/style.min.css ./public/tool-tip.cssHTML
<head>
<link rel="stylesheet" href="./tool-tip.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./tool-tip.min.js"></script>
</body>