Webcomponent for tooltips — text when you hover.
npm i -S @substrate-system/tool-tip<tool-tip content="This is a tooltip">
<!-- put the target as a child of tool-tip -->
<button>Hover me</button>
</tool-tip>This exposes ESM and common JS via
package.json exports field.
import { ToolTip } from '@substrate-system/tool-tip'require('@substrate-system/tool-tip')| 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. |
<tool-tip content="example" placement="left"></tool-tip>export type Placement =
| 'top'
| 'top-start'
| 'top-end'
| 'right'
| 'right-start'
| 'right-end'
| 'bottom'
| 'bottom-start'
| 'bottom-end'
| 'left'
| 'left-start'
| 'left-end'import '@substrate-system/tool-tip/css'Or minified:
import '@substrate-system/tool-tip/min/css'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.
import '@substrate-system/tool-tip'<tool-tip content="This is a tooltip">
<!-- put the target as a child of tool-tip -->
<button>Hover me</button>
</tool-tip>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.
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.css<head>
<link rel="stylesheet" href="./tool-tip.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./tool-tip.min.js"></script>
</body>