Tooltip v0.2.0+ HelixUI v0.2.0 or later required

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

{{position.label}} Tooltip 
<p>
  <hx-icon id="icon1" type="help-circle"></hx-icon>
</p>
<hx-tooltip for="icon1" position="{{position.value}}">
  {{position.label}} 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