Tooltip Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated), created
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
Attribute Name | Attribute Value |
|---|---|
hawksearch-tooltip | Â |
hawksearch-tooltip-content | Â |
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>