Tooltip v0.2.0+

A tooltip is a component that provides descriptive information related to an element when the element receives keyboard focus or the mouse hovers over it.

Basic Tooltip

 

<p>
  <hx-icon id="icon1" type="help-circle"></hx-icon>
</p>
<hx-tooltip for="icon1" position="top-center">
  Top Center Tooltip
</hx-tooltip>

Accessibility

  1. Make sure that the control element can receive focus (i.e., use a native focusable element or an element with a non-negative tabindex attribute).
  2. Tooltips should not contain interactive content. Consider using the Popover component for interactive content.

See Also