Skip to main content

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

NameTypeDefaultDescription
textstring | React.ReactNodeDefine the tip text
children*React.ReactNodeDefine chip content
placementauto | auto-start | auto-end | top | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-endautoSet the placement of tip
Last updated on by enkhzule