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 | 3.119.0 |
Stable3.119.0View in LexiconCHANGELOG
Position
Top
Tooltip on the top
Tooltip on the top left
Tooltip on the top right
<div class="fade tooltip clay-tooltip-top show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the top</div></div>
</div>
<div class="fade tooltip clay-tooltip-top-left show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the top left</div></div>
</div>
<div class="fade tooltip clay-tooltip-top-right show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the top right</div></div>
</div>Right
Tooltip on the right
Tooltip on the right top
Tooltip on the right bottom
<div class="fade tooltip clay-tooltip-right show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the right</div></div>
</div>
<div class="fade tooltip clay-tooltip-right-top show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the right top</div></div>
</div>
<div class="fade tooltip clay-tooltip-right-bottom show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the right bottom</div></div>
</div>Bottom
Tooltip on the bottom
Tooltip on the bottom left
Tooltip on the bottom right
<div class="fade tooltip clay-tooltip-bottom show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the bottom</div></div>
</div>
<div class="fade tooltip clay-tooltip-bottom-left show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the bottom left</div></div>
</div>
<div class="fade tooltip clay-tooltip-bottom-right show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the bottom right</div></div>
</div>Left
Tooltip on the left
Tooltip on the left top
Tooltip on the left bottom
<div class="fade tooltip clay-tooltip-left show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the left</div></div>
</div>
<div class="fade tooltip clay-tooltip-left-top show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the left top</div></div>
</div>
<div class="fade tooltip clay-tooltip-left-bottom show" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner"><div>Tooltip on the left bottom</div></div>
</div>