Skip to content

Hint

Use hint element for rendering a hint anywhere on the page. Hint element uses the message mixins for additional styling.

Example

Storefront theme provides predefined stylings for one hint that you can position however you want. Find out more about h-hint webcomponent here.

h-hint
    <h-hint direction="top">
        <p>Hint trigger</p>
        <h-hint-content>
            Hint content
        </h-hint-content>
    </h-hint>
h-tooltip
    <h-hint direction="top" class="hint" tabindex="0">
        <p>Hint trigger</p>
        <h-hint-content slot="message-content" class="hint__content" role="tooltip" inert>
            Hint content
        </h-hint-content>
    </h-hint>

Hint tags

The .hint and .hint__content classes where designed to be used with <h-hint> and <h-hint-content> webcomponents. However, you can use them with any element you want. Eg. <div> or <span>. You should remember to add appropriate attribute to such elements (role="tooltip" and inert or tabindex="0") to tell assistive technologies such as screen readers what purpose the element serves.

LESS

You can modify any hint less variable in your User Less section to change hint styles.

Hints variables

Variables used to style hints.

@hintContentBackgroundColor: @neutralColors800;
@hintContentColor: @neutralColors0;
@hintContentPadding: 10;

If you want to change tooltip styles, you can just change the variables. To change default color just modify @hintContentColor variable.

@hintContentColor: blue;

Hint standard styles

Here are default hint styles:

.hint {
    .message-decorate();
    width: fit-content;

    &__content {
        max-width: @messageContentMaxWidth;
        background-color: @hintContentBackgroundColor;
        color: @hintContentColor;
        display: block;
        .pixel-to-rem(padding, @hintContentPadding);
        .size-xs();
        .line-height(@lineHeightInPxXxs);
    }
}

h-hint-content {
    display: none;
}

Used style references

Webcomponents reference