# @jonny/tooltip

> My favorite tooltip

Latest version **2.0.0** (published 2021-04-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install @jonny/tooltip
pnpm add @jonny/tooltip
yarn add @jonny/tooltip
bun add @jonny/tooltip
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2021-04-20 |
| First published | 2019-05-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jonny Burger |
| Maintainers | jonny |

## Links

- npm: https://www.npmjs.com/package/@jonny/tooltip
- Repository: https://github.com/JonnyBurger/tooltip
- Homepage: https://github.com/JonnyBurger/tooltip#readme
- Issues: https://github.com/JonnyBurger/tooltip/issues
- npm.io page: https://npm.io/package/@jonny/tooltip

## Dependencies (4)

- [csstype](https://npm.io/package/csstype.md) ^2.6.4
- [react-popper](https://npm.io/package/react-popper.md) ^2.2.5
- [@jonny/base-ui](https://npm.io/package/@jonny/base-ui.md) ^2.0.0
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.9.2

## Recent versions

- 2.0.0 (latest) — 2021-04-20
- 1.0.0 — 2021-04-20
- 1.0.0-alpha.31 — 2020-01-13
- 1.0.0-alpha.30 — 2020-01-13
- 1.0.0-alpha.29 — 2019-06-05
- 1.0.0-alpha.28 — 2019-06-05
- 1.0.0-alpha.27 — 2019-06-02
- 1.0.0-alpha.26 — 2019-05-23
- 1.0.0-alpha.25 — 2019-05-19
- 1.0.0-alpha.24 — 2019-05-18
- 1.0.0-alpha.23 — 2019-05-18
- 1.0.0-alpha.22 — 2019-05-18
- 1.0.0-alpha.21 — 2019-05-17
- 1.0.0-alpha.20 — 2019-05-17
- 1.0.0-alpha.19 — 2019-05-17
- … 14 more at https://npm.io/package/@jonny/tooltip/versions

## README

# @jonny/tooltip

The tooltip that I use in my projects :)

### Usage

```jsx
import Tooltip from '@jonny/tooltip'

export default () => (
    <Tooltip
        tip={<div>hi there</div>}
        preferredPlacement="bottom-end"
    >
      <button>Hover over me</button>
    </Tooltip>
)

```

## Props

### `tip`
Either string or React Markup

### `preferredPlacement`
A PopperJS.Placement - one of:
```js
'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'
```

Note that the tooltip might end up being placed differently to avoid the edges of the viewport.

### `arrowSize`

Size of the arrow of the tooltip. Default is `8` resulting in a 8x8px square rotated.

### `style`
Styles to be applied to both the bubble and the arrow. For borders, use the props instead.

### `bubbleStyle`
Styles to be applied to the bubble.

### `arrowStyle`
Styles to be applied to the arrow.

### `bubbleProps`
Props to be applied to the bubble `<div>`

### `arrowProps`
Props to be applied to the arrow `<div>`.


### `borderWidth`

Width of the Tooltip border (bubble and arrow). Default: `0`


### `bubbleBorderWidth`

Width of the border of the tooltip bubble. Overrides `borderWidth`

### `arrowBorderWidth`

Width of the border of the tooltip arrow. Overrides `borderWidth`


### `borderColor`

Color of the Tooltip border (bubble and arrow).
Default `#b3b3b3`

### `bubbleBorderWidth`

Color of the bubble border.
Overrides `borderColor`

### `arrowBorderWidth`

Color of the arrow border.
Overrides `borderColor`

### `borderStyle`

Style of the Tooltip border (bubble and arrow).
Default `solid`

### `bubbleBorderStyle`

Border style of the Tooltip bubble.
Overrides `borderStyle`

### `arrowBorderStyle`

Border style of the Tooltip arrow.
Overrides `borderStyle`

## Also see

- [@jonny/popover](https://npmjs.com/package/@jonny/popover)

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