# preact-hint

> Tooltip Component for Preact

Latest version **0.3.1** (published 2025-03-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install preact-hint
pnpm add preact-hint
yarn add preact-hint
bun add preact-hint
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2025-03-11 |
| First published | 2020-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 13.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | rschristian |
| Keywords | preact, hint, tooltip, component |

## Links

- npm: https://www.npmjs.com/package/preact-hint
- Repository: https://github.com/rschristian/preact-hint
- Homepage: https://rschristian.github.io/preact-hint
- Issues: https://github.com/rschristian/preact-hint/issues
- npm.io page: https://npm.io/package/preact-hint

## Recent versions

- 0.3.1 (latest) — 2025-03-11
- 0.3.0 — 2024-07-28
- 0.2.0 — 2021-09-09
- 0.1.6 — 2021-05-10
- 0.1.5 — 2020-11-01
- 0.1.4 — 2020-11-01
- 0.1.3 — 2020-09-11
- 0.1.2 — 2020-09-11
- 0.1.1 — 2020-09-11
- 0.1.0 — 2020-09-10

## README

<h1 align="center">Preact Hint</h1>

<div align="center">
    <a href="https://github.com/rschristian/preact-hint/blob/master/LICENSE">
        <img
           alt="NPM"
           src="https://img.shields.io/npm/l/preact-hint?color=blue"
         />
    </a>
</div>

<br />

Preact-Hint is a tiny component library used for displaying tooltips. Try out [the demo](https://preact-hint.rschristian.dev/)!

## Install

```
$ npm install preact-hint
```

## Usage

```jsx
import Hint from 'preact-hint';
import 'preact-hint/dist/index.css';

export default function App() {
    return (
        <Hint>
            <button data-hint="Hello World!">Hover over me!</button>
        </Hint>
    );
}
```

## API

### attribute

type: `string`<br/>
default: `data-hint`

Allows you to customize which attribute contains hint data on the element.

```jsx
<Hint attribute="data-foo">
    <button data-foo="Hello World!">Hover over me!</button>
</Hint>
```

### template

type: `(content: string) => VNode`<br/>
default: `undefined`

Allows you to customize the content within the tooltip. See the following example:

```jsx
<Hint
    template={(content) => {
        const stringPieces = content.split(',');
        return (
            <Fragment>
                <strong>{stringPieces[0]} Contributions</strong> on {stringPieces[1]}
            </Fragment>
        );
    }}
>
    <button data-hint={['0', '2019-09-14']}>Hover over me!</button>
</Hint>
```

## License

MIT © Ryan Christian

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