https://github.com/rschristian/preact-hint

A tiny and flexible tooltip library for Preact applications
https://github.com/rschristian/preact-hint

component hint preact tooltip

Last synced: 6 days ago
JSON representation

A tiny and flexible tooltip library for Preact applications

• Host: GitHub
• URL: https://github.com/rschristian/preact-hint
• Owner: rschristian
• License: mit
• Created: 2020-08-18T02:48:32.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-28T00:21:12.000Z (4 months ago)
• Last Synced: 2024-10-28T06:31:04.406Z (17 days ago)
• Topics: component, hint, preact, tooltip
• Language: TypeScript
• Homepage: https://preact-hint.rschristian.dev
• Size: 1.58 MB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Preact Hint




    

        

    






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

## Install

```

$ yarn add preact-hint

```

## Usage

```jsx

import Hint from 'preact-hint';

import 'preact-hint/dist/index.css';

export default function App() {

    return (

        

            Hover over me!

        

    );

}

```

## API

### attribute

type: `string`


default: `data-hint`

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

```jsx

    Hover over me!

```

### template

type: `(content: string) => VNode`


default: `undefined`

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

```jsx

 {

        const stringPieces = content.split(',');

        return (

            

                {stringPieces[0]} Contributions on {stringPieces[1]}

            

        );

    }}

>

    Hover over me!

```

## License

MIT © Ryan Christian