# @dreamworld/dw-tooltip

> A Tooltip Webcomponent created through LitElement and [Tippy.js](https://atomiks.github.io/tippyjs)

Latest version **3.1.4** (published 2024-10-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dreamworld/dw-tooltip
pnpm add @dreamworld/dw-tooltip
yarn add @dreamworld/dw-tooltip
bun add @dreamworld/dw-tooltip
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.4 |
| Published | 2024-10-22 |
| First published | 2019-08-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 14.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chiragmoradiya, chetang7, ajay-dhameliya, dw-devops |

## Links

- npm: https://www.npmjs.com/package/@dreamworld/dw-tooltip
- npm.io page: https://npm.io/package/@dreamworld/dw-tooltip

## Dependencies (3)

- [tippy.js](https://npm.io/package/tippy.js.md) ^6.2.7
- [@dreamworld/pwa-helpers](https://npm.io/package/@dreamworld/pwa-helpers.md) ^1.13.1
- [@dreamworld/material-styles](https://npm.io/package/@dreamworld/material-styles.md) ^3.0.0

## Recent versions

- 3.1.4 (latest) — 2024-10-22
- 3.1.4-update-primary-color.1 (update-primary-color) — 2024-10-21
- 3.1.3-add-follow-cursor-plugin.1 (add-follow-cursor-plugin) — 2024-07-13
- 3.1.2-show-tooltip-with-animation.1 (show-tooltip-with-animation) — 2024-04-03
- 3.1.1-ssr.1 (ssr) — 2023-02-14
- 3.1.0-tippyInstance.1 (tippyInstance) — 2022-12-28
- 2.2.2-development.3 (development) — 2022-02-03
- 2.2.0-upgrade-version.1 (upgrade-version) — 2021-09-08
- 2.2.0-export-dw-tooltip.1 (export-dw-tooltip) — 2021-07-09
- 2.1.0-dynamic-content.1 (dynamic-content) — 2021-03-17
- 1.5.0-update-tippy.2 (update-tippy) — 2021-02-05
- 1.4.1-update-config.1 (update-config) — 2020-10-26
- 1.4.0-use-our-lit-element-instead-of-lit-element-base-class.1 (use-our-lit-element-instead-of-lit-element-base-class) — 2020-07-25
- 1.2.2-initialize-tooltip-on-element-connect.1 (initialize-tooltip-on-element-connect) — 2020-03-14
- 3.1.3 — 2024-07-15
- … 24 more at https://npm.io/package/@dreamworld/dw-tooltip/versions

## README

A Tooltip Webcomponent created through LitElement and [Tippy.js](https://atomiks.github.io/tippyjs)

## Usage
```html
	<paper-button id="my-button">My Button</paper-button>
	<dw-tooltip for="my-button">I'm tippy tooltip!!!</dw-tooltip>
```

## Configs/Options
It supports all the options supported by Tippy.js. But, following most used options can be configured through properties.
- trigger
- content (When it's not set, gets content from light-dom `this.innerHTML`)
- offset
- placement
- animation
- theme
- disabled

Other options you may configure through a special Object property `extraOptions`.

### Theme
To configure Theme in little bit tricky. Tippy adds tooltip element directly to the `body`. 
So, You need to add theme css directly into the Body.

e.g. To activate `tomato` theme in the Tippy's demo. You need to add following CSS to the Body.
```css
.tippy-tooltip.tomato-theme {
	background-color: tomato;
	color: yellow;
}

.tippy-tooltip.tomato-theme[data-animatefill] {
	background-color: transparent;
}

.tippy-tooltip.tomato-theme .tippy-backdrop {
	background-color: tomato;
}
```

## HTML content tooltip
```html
	<paper-button id="my-button">My Button</paper-button>
	<dw-tooltip for="my-button">
		<span>I'm tippy tooltip!!!</span>
	</dw-tooltip>
```

> We haven't tried this yet, but there might be a styling issue in this as well. 
> Becuase, Tippy moves `span` inside it's tooltip dom. Which is appended directly to the Body. 
> So, CSS written through the element's `style` property won't work. Though Inline CSS should work.


## Known issues
- `trigger=focus` isn't working on iOS Safari + Chrome.

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