@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

Installation

$ npm i @siamf/tooltip

Usage

<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

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