Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

Basic Tooltip

<me-tooltip title="Delete"> <me-icon-button>...</me-icon-button> </me-tooltip>

Top

Bottom

Left

Right

Top Start

Top End

Bottom Start

Bottom End

<me-tooltip title="Top" placement="top"> <me-button>Top</me-button> </me-tooltip>

Top Arrow

Bottom Arrow

Right Arrow

<me-tooltip title="Info" placement="top" arrow> <me-button>Hover me</me-button> </me-tooltip>

Did you know? Hover this text to see a tooltip.

Attribute	Type	Default	Description
`title`	string	—	Tooltip text content.
`placement`	top \| bottom \| left \| right \| top-start \| top-end \| bottom-start \| bottom-end \| left-start \| left-end \| right-start \| right-end	bottom	Preferred tooltip position.
`arrow`	boolean	false	Shows a directional arrow.