# @aster-elements/tooltip

> ### HTML declaration ```html Hey! Do a mouse over to show the tooltip

Latest version **1.0.6** (published 2022-02-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install @aster-elements/tooltip
pnpm add @aster-elements/tooltip
yarn add @aster-elements/tooltip
bun add @aster-elements/tooltip
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2022-02-17 |
| First published | 2022-01-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 75.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sebdoucet |
| Maintainers | aster-elements |

## Links

- npm: https://www.npmjs.com/package/@aster-elements/tooltip
- npm.io page: https://npm.io/package/@aster-elements/tooltip

## Dependencies (6)

- [lit](https://npm.io/package/lit.md) ^2.1.4
- [tslib](https://npm.io/package/tslib.md) ^2.3.1
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [@aster-js/dom](https://npm.io/package/@aster-js/dom.md) ^1.0.1
- [@aster-js/async](https://npm.io/package/@aster-js/async.md) ^1.2.2
- [@aster-js/events](https://npm.io/package/@aster-js/events.md) ^1.2.0

## Recent versions

- 1.0.6 (latest) — 2022-02-17
- 1.0.5 — 2022-01-31
- 1.0.4 — 2022-01-31
- 1.0.2 — 2022-01-25
- 1.0.1 — 2022-01-24
- 1.0.0 — 2022-01-24

## README

# @aster-elements/tooltip

### HTML declaration
```html
<div id="target">Hey! Do a mouse over to show the tooltip</div>

<aster-tooltip default-position="bottom" default-align="center" distance="20"></aster-tooltip>
```
> To ensure the tooltip will be always on top, put this element at the end of the body or at the end of its scope.

### Example of CSS customisation
```css
aster-tooltip {
    background-color: rgb(230, 173, 67);
    color: #fff;
}
```

### Usage
```ts
import { Tooltip } from "@aster-elements/tooltip";

Tooltip.get().for("#target", "This is a beautiful custom tooltip")
```

## Reference
- `Tooltip.get(name?)`: Retreive the tooltip instance.

## Properties
- `defaultPosition`: Define the fallback when position is not provided when showing the tooltip.
- `defaultAlign`: Define the fallback when align is not provided when showing the tooltip.
- `distance`: Define the distance in pixel of the tooltip from the target element.
- `autoHide`: Indicate whether or not the tooltip should disappear when mouse leave the targeted element.
- `delay`: Define a debounce delay use when auto hide the tooltip.

## Methods
- `for(targetOrQuerySelector, content, options?)`: Attach a tooltip with the provided element, element list or query selector that will appear when the mouse is over the element.
- `show(eventOrTarget, content, options?)`: Show the tooltip for the provided element or the element origin to a UI Event.

## TooltipOpeningOptions
- `position`: Define the position arround the tooltip.
- `align`: Define the alignment of the position.
- `cssClass`: Define a custom css class.
- `autoHide`: Indiquate whether or not the tooltip should disappear when mouse out.

## TooltipAlign
- `start`: Align the tooltip at the start of the position e.g. top position => align left, left position => top align.
- `center`: Align the tooltip the center of the position.
- `end`: Align the tooltip at the end of the position e.g. top position => align right, left position => bottom align

## TooltipPosition
Possible values: `top`, `left`, `bottom`, `right`

---
_Source: https://npm.io/package/@aster-elements/tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._