Tooltip

View in Lexicon

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';`

Table of Contents

Position
Top
Right
Bottom
Left

Position

Top

Snippet

<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

Snippet

<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

Snippet

<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

Snippet

<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>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Position
Top
Right
Bottom
Left