Preact Hint

Preact-Hint is a lightweight and extensible tooltip component for preact. It was designed with a focus on size, adaptability, and ease of use.

Installation

$ yarn add preact-hint

General Usage

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 Options

• attribute

Type:string

Default:'data-hint'

Sets the HTML attribute to check against for hint content

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

• template

Type:(content: string) => VNode

Default:undefined

Callback function for controlling how the hint HTML is formed

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