Overview

The Tooltip component is used to display a brief explanation or contextual information when the user hovers over an element.

Selector

The selector for this component is <hawksearch-tooltip>.

Data Model

The following data model is exposed to the Handlebars template:

{
  text: string
}

Event Binding Attributes

These attributes are used to position the tooltip based on the size and scroll position of the active window. The hawksearch-tooltip attribute should be present on an element containing both the element the tooltip is attached to (to display on hover) and the element containing the tooltip content, which should have a hawksearch-tooltip-content attribute.

Default Template

<span class='tooltip' hawksearch-tooltip>
    <span class='tooltip__icon'>
        <hawksearch-icon name='help' class='facet__heading__tooltip'></hawksearch-icon>
    </span>
    <span class='tooltip__content' hawksearch-tooltip-content>{{text}}</span>
</span>