ToolTip

The Tooltip component is used render a small info toast for any content, when it is hovered.

Usage

To use the tooltip component wrap it over the content, for which you need to show the ToolTip. The label prop is used to render the text for the tooltip

Code

<ToolTip label="Sample tool tip">

<FontAwesomeIcon icon={faInfoCircle} />

</ToolTip>

Placement

The ToolTip component position can also be varied by using the placement prop which accepts a string value. The accepted values are the following, each reperesents a seperate position for the component,

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

LEFT

TOP

BOTTOM

RIGHT

Code

<ToolTip label="Sample tool tip" position='left'>

// your content here

</ToolTip>

<ToolTip label="Sample tool tip" position='right'>

// your content here

</ToolTip>

<ToolTip label="Sample tool tip" position='top'>

// your content here

</ToolTip>

<ToolTip label="Sample tool tip" position='bottom'>

// your content here

</ToolTip>

Width

The width of the ToolTip can also be adjusted by using the width prop. This prop accepts number value.

Custom Width

Default Width

Code

<ToolTip label="This is a sample tool tip with custom width" width={300}>

<div style={{ fontWeight: "500" }}>Hover over me</div>

</ToolTip>

<ToolTip label="This is a sample tool tip without custom width">

<div style={{ fontWeight: "500" }}>Hover over me</div>

</ToolTip>

API

Prop	Type	Possible values	Default Value
position	string	"top","bottom","left" and "right"	"right"
label	string	Any string value	--
width	number	Any number value	500

Built by Akshay 🤙