https://github.com/siamahnaf/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.
https://github.com/siamahnaf/tooltip

next-component react-component react-tooltip siamf-tooltip tooltip

Last synced: 12 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/siamahnaf/tooltip
• Owner: siamahnaf
• Created: 2025-01-28T16:05:09.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-25T08:36:47.000Z (9 months ago)
• Last Synced: 2025-08-08T22:25:22.827Z (8 months ago)
• Topics: next-component, react-component, react-tooltip, siamf-tooltip, tooltip
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@siamf/tooltip
• Size: 114 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          



  

  

  


 


# @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.



- 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

    

      Hover Me

    

```

# Available props

  

     Name 

     Description 

     Type 

     Default/Required 

  

  

     children 

     Child element 

     ReactNode | JSX.Element 

     required 

  

   

     content 

     Content to show on tooltip overlay 

      string | ReactNode 

     required 

  

   

     placement 

     Tooltip placement 

     "bottom" | "left" | "right" | "top" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end" 

     "top" 

  

   

     trigger 

     Trigger Options 

     "hover" | "click" 

     "hover" 

  

  

     openDefault 

     Default open or not 

     boolean 

     false 

  

   

     offset 

     Tooltip and button distance 

      number 

     10 

  

  

     variant 

     The interactivity of tooltip style 

      "success" | "warning" | "error" | "info" 

     "info" 

  

  

     showArrow 

     Either show or hide arrow icon 

      boolean 

     true 

  

  

     arrowConfig 

     Arrow icon configurations 

      ArrowTypes 

      

  

   

     className 

     Classname for styling 

      string 

      

  

  

     styles 

     CSSProperties for styling inline 

      CSSProperties 

      

  

### ArrowTypes

  

     Name 

     Description 

     Type 

     Default/Required 

  

  

     width 

     Arrow icon width 

     number 

     14 

  

   

     height 

     Arrow icon height 

      number 

     7 

  

   

     radius 

     Arrow icon corner radius 

     number(0-15) 

     3 

  

   

     fill 

     Arrow icon color 

     string 

      

  

## Connect with me