Tip

Tip text

Define the tip text with text prop.

<>

<Tip text="Tip text">

<Button>Hover on me!</Button>

</Tip>

</>

Placement

Change tip placement by placement prop. Hover over the text paragraphs below to see tips.

Auto placement will place the tip automatically depending on the content placement.

<>

<Tip placement="auto" text="Tip">

<Button>Hover on me!</Button>

</Tip>

</>

Top, right, left and bottom placements. You can also add 'start' and 'end' on them. Example: 'top-start', 'top-end', 'right-start', etc.

<>

<Tip placement="top" text="Tip">

<Button>Hover on me!</Button>

</Tip>

<Tip placement="right" text="Tip">

<Button>Hover on me!</Button>

</Tip>

<Tip placement="bottom" text="Tip">

<Button>Hover on me!</Button>

</Tip>

<Tip placement="left" text="Tip">

<Button>Hover on me!</Button>

</Tip>

</>

API

import Tip from "erxes-ui/lib/components/Tip";

* required prop

Name	Type	Default	Description
text	string | React.ReactNode		Define the tip text
children*	React.ReactNode		Define chip content
placement	auto | auto-start | auto-end | top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end	auto	Set the placement of tip