Skip to content

Hint

The h-hint webcomponent is used to render hints on a page. h-hint 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 hint while focusing on the element with a tab key
  • Possibility of having multiple triggers of the same hint
  • Opens the hint in one of the following variations provided by TDirection
  • Repositions the hint when it turns out to be off the screen
  • Adds appropriate ARIA roles

Attributes

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

Basic hint

Basic hint
<h-hint direction="top">
    <p>Hint trigger</p>
    <h-hint-content>
        Hint content
    </h-hint-content>
</h-hint>

h-hint-content

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

h-hint-content
    <h-hint-content>
        Content
    </h-hint-content>
h-hint-content
    <h-hint-content slot="message-content" class="hint__content" role="tooltip" inert>
        Content
    </h-hint-content>

Webcomponents reference

Objects reference