tool-tip


Webcomponent for tooltips — text when you hover.

See a live demo

Contents

- Install
- Example
- API
* ESM
* Common JS
- Attributes
- CSS
* Import CSS
- Use
* JS
* HTML
* pre-built

Install

``sh
npm i -S @substrate-system/tool-tip
`

Example

`html


Hover me

`

API

This exposes ESM and common JS via
package.json exports field.

$3


`js
import { ToolTip } from '@substrate-system/tool-tip'
`

$3

`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

$3

`js
import '@substrate-system/tool-tip/css'
`

Or minified:
`js
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.

$3

`js
import '@substrate-system/tool-tip'
`

$3


`html


Hover me

`

$3

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
`sh
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
`

#### HTML
`html







``