# easy-tooltip

> Tooltips with just some HTML, Javascript and CSS. Easy to customize

Latest version **1.0.0** (published 2023-02-13) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-02-13 |
| First published | 2023-02-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jeroen Reijs |
| Maintainers | jeroenreijs |
| Keywords | HTML, Javascript, CSS, tooltips |

## Links

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

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-02-13
- 0.2.0 — 2023-02-10
- 0.1.1 — 2023-02-07
- 0.1.0 — 2023-02-07

## README

# easy-tooltip

Very easy to use tooltip. Highly customisable.
There are a lot of pretty complex tooltip libraries.
In my opinion tooltips shouldn't be more than a little DOM change.
Let me know if there is anything you miss, or when you run into issues.

## Properties

- `tip`: (string | HTML)
- `tipPosition`: "`top`" | "`right`" | "`bottom`" | "`left`", default "`top`"
- `arrowPosition`: "`start`" | "`center`" | "`end`", default "`center`"
- `backgroundColor`: any web color, default `#000000bd`
- `textColor`: any web color, default `#ffffff`
- `maxWidth`: parent | length | percentage, default `none`
- `animated`: boolean, default `false`

## How to use

### Use in plain HTML

The properties are matched by the use of data attributes on your HTML element. Usage of a `<span>` is recommended.

    <p>This is an <span data-tip="Hello world">example</span> text with a tooltip</p>

Or with HTML:

    <p>This is an <span data-tip="Hello<br>world<br>This<br>would<br>have<br>line-breaks">example</span> text with a tooltip</p>

Other data attributes:

- `data-tip`
- `data-tip-position`
- `data-tip-arrow-position`
- `data-tip-bg-color`
- `data-tip-text-color`
- `data-tip-max-width`
- `data-animated`

Only one required is of course `data-tip`. All others are optional to add styling of your choice.

### Use in React

Import the javascript and css files in the root app. And run in useEffect to only run once.

    import EasyTooltip from 'easy-tooltip';
    import 'easy-tooltip/dist/easy-tooltip.min.css';

    useEffect(() => {
      EasyTooltip();
    });

Then you can create a React component to simplify things, for example:

import React from 'react';

    export function Tip({
            children,
            tip,
            position,
            bgColor,
            color,
            arrowPosition,
            width,
        }) {
        return (
            <span
                data-tip={tip}
                data-tip-position={position}
                data-tip-bg-color={bgColor}
                data-tip-text-color={color}
                data-tip-arrow-position={arrowPosition}
                data-tip-max-width={width}
            >
                {children}
            </span>
        );
    }

And use that component everywhere you want.

    <Tip tip="Hello world" position="left" bgColor="#ff0000bd">
       save
    </Tip>

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