Tooltip

import Tooltip from 'frui/Tooltip';

Copy

Props

Name	Type	Required	Notes
arrow	boolean	No	Displays an arrow on the tooltip
bottom	boolean	No	Places in bottom
children	ReactNode	Yes	Content that triggers tooltip
className	string	No	Standard HTML class names
color	string	No	Custom CSS hex or name
curved	boolean	No	Slight curved corners
error	boolean	No	Red tooltip
info	boolean	No	Blue tooltip
muted	boolean	No	Gray tooltip
left	boolean	No	Places in left
opacity	string \| number	No	Adjust the transparency [0-100]
pill	boolean	No	Max rounded corners
right	boolean	No	Places in right
rounded	boolean	No	Rounded corners
style	CSS Object	No	Standard CSS input
success	boolean	No	Green tooltip
text	string	Yes	Text displayed inside the tooltip
top	boolean	No	Places in top (default)
warning	boolean	No	Orange tooltip

Types

Tooltips have the following types: default, info, warning, success, error, and muted.

// Default
<Tooltip text="Submit">
  <Button color="#333">Submit</Button>
</Tooltip>

Copy

<Tooltip text="Submit info" info>
  <Button info>Submit info</Button>
</Tooltip>

Copy

<Tooltip text="Submit warning" warning>
  <Button warning>Submit Warning</Button>
</Tooltip>

Copy

<Tooltip text="Submit success" success>
  <Button success>Submit Success</Button>
</Tooltip>

Copy

<Tooltip text="Submit Error" error>
  <Button error>Submit Error</Button>
</Tooltip>

Copy

<Tooltip text="Submit Muted" muted>
  <Button muted>Submit Muted</Button>
</Tooltip>

Copy

Arrow

You can add an arrow to your tooltip: arrow.

<Tooltip text="Submit" arrow>
  <Button color="#333">Submit</Button>
</Tooltip>

Copy

Placements

Change the placement using: top, bottom, left, right.

// top, bottom, left, right, topLeft, topRight, bottomLeft, and bottomRight
<Tooltip text="top-right" topRight>
  <Button className="flex items-center justify-center w-32 h-11 p-3" info rounded>
    topRight
  </Button>
</Tooltip>

Copy

Rounded

Tooltips can be rounded in three ways: curved, rounded, and pill.

<Tooltip text="Submit Curved" info curved>
  <Button info curved>Submit Curved</Button>
</Tooltip>

Copy

<Tooltip text="Submit Rounded" warning rounded>
  <Button warning rounded>Submit Rounded</Button>
</Tooltip>

Copy

<Tooltip text="Submit Pill" success pill>
  <Button success pill>Submit Pill</Button>
</Tooltip>

Copy

Padding

You can add custom padding to your tooltip: padding={number}.

<Tooltip text="Submit" padding={20}>
  <Button color="#333" rounded>Submit</Button>
</Tooltip>

Copy

Opacity

You can adjust the transparency: opacity={number}.

<Tooltip text="Submit" opacity={50}>
  <Button color="#333">Submit</Button>
</Tooltip>

Copy

Custom Color

Tooltips can have custom CSS compatible colors which includes hex and color names.

<Tooltip text="Submit Custom" color="salmon">
  <Button color="salmon">Submit Custom</Button>
</Tooltip>

Copy

Custom Styles

You can add your own custom class to the tooltip component or use the frui-tooltip CSS class.

Components

Fields