Components

Tooltip

Shows additional context on tap or hover.

Selected Theme

Select brand or tribe name to preview style

Default

Usage

Tooltips displays informative text when users hover, focus, or click an element.

import { Tooltip } from 'legion-ui';

Variant

Legion-ui have three varian of tooltip

Title

You can change the Tooltip description with title prop

<Tooltip title="This is a text tooltip">
  <Button>Do hover here</Button>
</Tooltip>

Placement

Change the placement of the tooltip with the placement prop

  <Tooltip title="This is a tooltip" placement="top"><Button>Top</Button></Tooltip>
  <Tooltip title="This is a tooltip" placement="bottom"><Button>Bottom</Button></Tooltip>
  <Tooltip title="This is a tooltip" placement="left"><Button>Left</Button></Tooltip>
  <Tooltip title="This is a tooltip" placement="right"><Button>Right</Button></Tooltip>

Not Arrow

In some cases you may need to remove the arrow from the tooltip for this case you can use the arrow property

<Tooltip title="tooltip not arrow" arrow={false} placement="top"><Button>Top</Button></Tooltip>
<Tooltip title="tooltip not arrow" arrow={false} placement="bottom"><Button>Bottom</Button></Tooltip>
<Tooltip title="tooltip not arrow" arrow={false} placement="left"><Button>Left</Button></Tooltip>
<Tooltip title="tooltip not arrow" arrow={false} placement="right"><Button>Right</Button></Tooltip>

Props

property	propType	required	default	description
title	text	`true`	-	Text Tooltip
placement	`top-start` \| `top` \| `top-end` \| `left` \| `bottom-start` \| `bottom` \| `bottom-end` \| `right`	-	`top`	Tooltip placement relative to the target
arrow	boolean	-	`true`	Hide tooltip arrow icon

Do you have feedback?

Please let us know to make it better

Send Feedback