Tooltip

The h-tooltip webcomponent is used to render tooltips on a page. h-tooltip webcomponent uses the h-portal webcomponent to render it's content in a correct place on a page.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Features:

• Keyboard support - enable the tooltip while focusing with on the element with a tab key
• Possibility of having multiple triggers of the same tooltip
• Opens the tooltip in one of the following variations provided by TDirection
• Repositions the tooltip when it turns out to be off the screen
• Adds appropriate ARIA roles

Basic tooltip

Basic tooltip

<h-tooltip direction="top">
    <p>Tooltip trigger</p>
    <h-tooltip-content>
        Tooltip content
    </h-tooltip-content>
</h-tooltip>

h-tooltip-content

To facilitate tooltip creation we provide a h-tooltip-content component that is used within tooltip and is responsible for holding the content inside. Markup for h-tooltip-content looks like this:

sourceoutput

h-tooltip-content

    <h-tooltip-content>
        Welcome
    </h-tooltip-content>

h-tooltip-content

    <h-tooltip-content slot="message-content" class="tooltip__content" role="tooltip" inert>
        Welcome
    </h-tooltip-content>

h-tooltip attributes

Attribute name	Type	Default	Description
direction	TDirection	top-center	Direction in which a tooltip should render

Webcomponents reference

• h-portal

Objects reference

• TDirection