npm package: @siamf/tooltip
Description: A highly customizable advanced React tooltip component, offering extensive styling options to fit any design needs. It supports dynamic positioning, and custom triggers for enhanced interactivity.
Author: Siam Ahnaf
Latest version: 1.6.1

<br/>
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-white.png">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png">
  <img alt="Siam Ahnaf" src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/logo/logo-black.png" height="auto" width="240">
</picture>
<br/> <br/>

# @siamf/tooltip
A highly customizable advanced React tooltip component, offering extensive styling options to fit any design needs. It supports dynamic positioning, and custom triggers for enhanced interactivity. Easily integrate it into your `NextJs` project.

<a href="https://www.buymeacoffee.com/siamahnaf" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

- Customizations availability
- Easy to use
- Useable directly on `RSC`

# Demo

![image](https://github.com/siamahnaf/siamf-tooltip/blob/main/assets/one.png)
![image](https://github.com/siamahnaf/siamf-tooltip/blob/main/assets/all.png)

# Installation

```bash
$ npm i @siamf/tooltip
```

# Usage
```javascript
<Tooltip content="Hello World I am Using" variant="info" placement="top">
    <button className="bg-amber-500 py-10 px-4 rounded-lg cursor-pointer text-white">
      Hover Me
    </button>
</Tooltip>
```

# Available props

<table width="100%">
  <tr>
    <th> Name </th>
    <th> Description </th>
    <th> Type </th>
    <th> Default/Required </th>
  </tr>
  <tr>
    <td> children </td>
    <td> Child element </td>
    <td> ReactNode | JSX.Element </td>
    <td> required </td>
  </tr>
   <tr>
    <td> content </td>
    <td> Content to show on tooltip overlay </td>
     <td> string | ReactNode </td>
    <td> required </td>
  </tr>
   <tr>
    <td> placement </td>
    <td> Tooltip placement </td>
    <td> "bottom" | "left" | "right" | "top" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end" </td>
    <td> "top" </td>
  </tr>
   <tr>
    <td> trigger </td>
    <td> Trigger Options </td>
    <td> "hover" | "click" </td>
    <td> "hover" </td>
  </tr>
  <tr>
    <td> openDefault </td>
    <td> Default open or not </td>
    <td> boolean </td>
    <td> false </td>
  </tr>
   <tr>
    <td> offset </td>
    <td> Tooltip and button distance </td>
     <td> number </td>
    <td> 10 </td>
  </tr>
  <tr>
    <td> variant </td>
    <td> The interactivity of tooltip style </td>
     <td> "success" | "warning" | "error" | "info" </td>
    <td> "info" </td>
  </tr>
  <tr>
    <td> showArrow </td>
    <td> Either show or hide arrow icon </td>
     <td> boolean </td>
    <td> true </td>
  </tr>
  <tr>
    <td> arrowConfig </td>
    <td> Arrow icon configurations </td>
     <td> ArrowTypes </td>
    <td>  </td>
  </tr>
   <tr>
    <td> className </td>
    <td> Classname for styling </td>
     <td> string </td>
    <td>  </td>
  </tr>
  <tr>
    <td> styles </td>
    <td> CSSProperties for styling inline </td>
     <td> CSSProperties </td>
    <td>  </td>
  </tr>
</table>

### ArrowTypes
<table width="100%">
  <tr>
    <th> Name </th>
    <th> Description </th>
    <th> Type </th>
    <th> Default/Required </th>
  </tr>
  <tr>
    <td> width </td>
    <td> Arrow icon width </td>
    <td> number </td>
    <td> 14 </td>
  </tr>
   <tr>
    <td> height </td>
    <td> Arrow icon height </td>
     <td> number </td>
    <td> 7 </td>
  </tr>
   <tr>
    <td> radius </td>
    <td> Arrow icon corner radius </td>
    <td> number(0-15) </td>
    <td> 3 </td>
  </tr>
   <tr>
    <td> fill </td>
    <td> Arrow icon color </td>
    <td> string </td>
    <td>  </td>
  </tr>
</table>

## Connect with me
<div style="display: flex; align-items: center; gap: 3px;">
<a href="https://wa.me/8801611994403"><img src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/whatsapp.png" width="40" height="40"></a>
<a href="https://siamahnaf.com/" style="margin-right: 8px"><img src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/web.png" width="40" height="40"></a>
<a href="https://www.linkedin.com/in/siamahnaf/" style="margin-right: 8px"><img src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/linkedin.png" width="40" height="40"></a>
<a href="https://x.com/siamahnaf198" style="margin-right: 8px"><img src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/x.png" width="40" height="40"></a>
<a href="https://www.facebook.com/siamahnaf198/" style="margin-right: 8px"><img src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/facebook.png" width="40" height="40"></a>
<a href="https://t.me/siamahnaf198" style="margin-right: 8px"><img src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/telegram.png" width="40" height="40"></a>
<a href="https://www.npmjs.com/~siamahnaf" style="margin-right: 8px"><img src="https://raw.githubusercontent.com/siamahnaf/assets-kit/main/icons/npm.png" width="40" height="40"></a>
</div>