Tooltip

Demo

{/* Simple tooltip */}
<Tooltip label="Follow">
    <Icon name="add" />
</Tooltip>

{/* Large Tooltip */}
<Tooltip label="Print" large>
    <Icon name="print" />
</Tooltip>

{/* Rich Tooltip */}
<Tooltip label={<span>Upload <strong>file.zip</strong></span>}>
    <Icon name="cloud_upload" />
</Tooltip>

{/* Multiline Tooltip */}
<Tooltip label={<span>Share your content<br />via social media</span>}>
    <Icon name="share" />
</Tooltip>

{/* Right Tooltip */}
<Tooltip label="Follow" position="right">
    <Icon name="arrow_forward" />
</Tooltip>

{/* Left Tooltip */}
<Tooltip label="Follow" position="left">
    <Icon name="arrow_back" />
</Tooltip>

{/* Top Tooltip */}
<Tooltip label="Follow" position="top">
    <Icon name="arrow_upward" />
</Tooltip>

{/* Bottom Tooltip */}
<Tooltip label="Follow" position="bottom">
    <Icon name="arrow_downward" />
</Tooltip>

Configuration

Prop	Type	Effect	Remarks
label	Element or String	Specify the content of the tooltip	Required
large	Boolean	Defines a large tooltip	Optional
position	String[left, right, top, bottom]	Specify the position of the tooltip	Optional