Tooltip

Tooltips are brief pieces of information that appear on hover state over an element to clarify its meaning or use for the user.

install	yarn add @clayui/tooltip
version
use	import Tooltip from '@clayui/tooltip';

Position

Top

<div className="fade tooltip clay-tooltip-top show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the top</div></div>
</div>
<div className="fade tooltip clay-tooltip-top-left show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the top left</div></div>
</div>
<div className="fade tooltip clay-tooltip-top-right show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the top right</div></div>
</div>

Right

<div className="fade tooltip clay-tooltip-right show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the right</div></div>
</div>
<div className="fade tooltip clay-tooltip-right-top show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the right top</div></div>
</div>
<div className="fade tooltip clay-tooltip-right-bottom show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the right bottom</div></div>
</div>

Bottom

<div className="fade tooltip clay-tooltip-bottom show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the bottom</div></div>
</div>
<div className="fade tooltip clay-tooltip-bottom-left show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the bottom left</div></div>
</div>
<div className="fade tooltip clay-tooltip-bottom-right show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the bottom right</div></div>
</div>

Left

<div className="fade tooltip clay-tooltip-left show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the left</div></div>
</div>
<div className="fade tooltip clay-tooltip-left-top show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the left top</div></div>
</div>
<div className="fade tooltip clay-tooltip-left-bottom show" role="tooltip">
	<div className="arrow"></div>
	<div className="tooltip-inner"><div>Tooltip on the left bottom</div></div>
</div>