https://github.com/yysuni/react-single-tooltip

A tiny intelligent tooltip component.
https://github.com/yysuni/react-single-tooltip

function-component react react-component tooltip

Last synced: 11 days ago
JSON representation

A tiny intelligent tooltip component.

• Host: GitHub
• URL: https://github.com/yysuni/react-single-tooltip
• Owner: YYsuni
• License: mit
• Created: 2023-08-22T04:02:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-16T08:32:32.000Z (over 1 year ago)
• Last Synced: 2024-12-12T09:52:11.078Z (about 2 months ago)
• Topics: function-component, react, react-component, tooltip
• Language: TypeScript
• Homepage:
• Size: 1.93 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
react-single-tooltip is a opinionated tooltip component. It uses no dependencies. so, it is tiny yet intelligent.

## Usage

To start using the library, install it in your project:

```bash

npm install react-single-tooltip

```

Add `` to your app, it will be the place where all your tooltip will be rendered.

After that you can use `useTooltip()` hook in your component.

```jsx

import { useTooltipRef, SingleTooltip } from 'react-single-tooltip';

function App() {

  const ref = useTooltipRef("Tooltip content")

  

  return (

    


      

      Hover me

    

  );

}

```


## Props

### SingleTooltip component

| Name            | Type             | Default                    | Description         |

| :-------------- | :--------------- | :------------------------- | :------------------ |

| backgroundColor | string           | `rgba(0, 0, 0, 0.8)`       | -                   |

| zIndex          | number           | 99                         | -                   |

| borderRadius    | number           | 12                         | -                   |

| offset          | number \| string | 4                          | container padding   |

| padding         | number \| string | 12                         | content padding     |

| fontSize        | number \| string | 14                         | -                   |

| fontWeight      | number \| string | 400                        | -                   |

| color           | string           | `white`                    | -                   |

| maxWidth        | number \| string | `360px`(`200px` in mobile) | -                   |

| trangleWidth    | number           | 16                         | the bottom triangle |

| trangleHeight   | number           | 6                          | the bottom triangle |

### useTooltip params

| Name | Type    | Default   | Description |

| :--- | :------ | :-------- | :---------- |

| text | string  | undefined | required    |

| show | boolean | true      | -           |