# wired-tooltip

> Hand-drawn sketchy tooltip with text that appears on hover over an element.

Latest version **1.0.0** (published 2019-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install wired-tooltip
pnpm add wired-tooltip
yarn add wired-tooltip
bun add wired-tooltip
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-04-24 |
| First published | 2018-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 25.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10849 |
| Author | Preet Shihn |
| Maintainers | shihn |
| Keywords | tooltip, webcomponent, web component, rough, sketchy, hand-drawn, hand drawn, wireframe |

## Links

- npm: https://www.npmjs.com/package/wired-tooltip
- Repository: https://github.com/wiredjs/wired-elements
- Homepage: https://github.com/wiredjs/wired-elements#readme
- Issues: https://github.com/wiredjs/wired-elements/issues
- npm.io page: https://npm.io/package/wired-tooltip

## Dependencies (1)

- [wired-lib](https://npm.io/package/wired-lib.md) ^1.0.0

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-04-24
- 1.0.0-alpha.0 — 2019-04-24
- 0.9.0 — 2019-04-13
- 0.9.0-1 — 2019-03-02
- 0.9.0-0 — 2019-03-02
- 0.8.0 — 2018-09-29
- 0.8.0-0 — 2018-09-29
- 0.6.5 — 2018-06-21
- 0.6.0 — 2018-06-03
- 0.5.1 — 2018-05-23
- 0.5.0 — 2018-05-22

## README

![wired tooltip](https://wiredjs.github.io/wired-elements/images/tooltip.png)

# wired-tooltip

Tooltip with text that appears on hover over an element. It will be centered to an anchor element specified in the 'for' attribute, or, if that doesn't exist, centered to the parent node containing it.

For demo and view the complete set of wired-elememts: [wiredjs.com](http://wiredjs.com/)

Learn about web components [here](https://www.webcomponents.org/introduction).

## Usage

Add wired-tooltip to your project:
```
npm i wired-tooltip
```
Import wired-tooltip definition into your HTML page:
```html
<script type="module" src="wired-tooltip/wired-tooltip.js"></script>
```
Or into your module script:
```javascript
import { WiredTooltip } from "wired-tooltip"
```

Use it in your web page:
```html
<div>
  <div class="inline">
    <button>Click me!</button>
    <wired-tooltip text="Below"></wired-tooltip>
  </div>
  <button id="btn">Click me!</button>
  <wired-tooltip position="top" for="btn" text="Above"></wired-tooltip>
</div>
```

## Properties

**for** - Id of the element the tooltip is for. *Optional*.

**position** - String value: left/right/top/bottom. Default is bottom.

**text** - Text in the tooltip.

## Custom CSS Variables

**--wired-tooltip-border-color** Border color of the tooltip. Default is *currentColor*.

**--wired-tooltip-background** Background color of the tooltip. 

## License
[MIT License](https://github.com/wiredjs/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)

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