Tooltip

Copyright © 2023 W3C®. This software or document includes material copied from or derived from Tooltip Pattern (https://www.w3.org/WAI/about/using-wai-material/).

A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out.

Tooltip widgets do not receive focus. A hover that contains focusable elements can be made using a non-modal dialog.

Position: top (default)

<cc-button>
  <cc-icon icon="phone"></cc-icon>
  <cc-tooltip slot="tooltip" text="Go to next page"></cc-tooltip>
</cc-button>

Position: bottom

<cc-button>
  <cc-icon icon="phone"></cc-icon>
  <cc-tooltip slot="tooltip" text="Go to next page" position="bottom"></cc-tooltip>
</cc-button>

Position: left

<cc-button>
  <cc-icon icon="phone"></cc-icon>
  <cc-tooltip slot="tooltip" text="Go to next page" position="left"></cc-tooltip>
</cc-button>

Position: right

<cc-button>
  <cc-icon icon="phone"></cc-icon>
  <cc-tooltip slot="tooltip" text="Go to next page" position="right"></cc-tooltip>
</cc-button>