Tooltip

Usage

See design examples

Tooltip Example

Hover to see the new tooltip.

This is a tooltip

multiply Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function.

<span class="tooltip-label" style="margin-right: 40rem;">
    Hover to see the new tooltip.
    <span class="tooltip tooltip-right-top">
        <span class="tooltip-header">
            <p>This is a tooltip</p>
            <span class="u-icon u-icon-16" close-tooltip>multiply</span>
        </span>
        Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function.
        <span class="tooltip-footer">
            <button class="flat button-small">Button</button>
            <button class="button-small">Button</button>
        </span>
    </span>
</span>

Hover to see the dark tooltip.

This is a tooltip

multiply Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function.

<span class="tooltip-label">
    Hover to see the dark tooltip.
    <span class="tooltip tooltip-dark tooltip-right-top">
        <span class="tooltip-header">
            <p>This is a tooltip</p>
            <span class="u-icon u-icon-16" close-tooltip>multiply</span>
        </span>
        Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function.
        <span class="tooltip-footer">
            <button class="flat button-small">Button</button>
            <button class="button-small">Button</button>
        </span>
    </span>
</span>

Tooltip Position Utility Classes

Use the following utility classes to control the tooltip’s position relative to the target element:

Right Alignment

• .tooltip-right-top: Positions tooltip to the right, top-aligned.
• .tooltip-right-middle: Right alignment at the middle.
• .tooltip-right-bottom: Right alignment at the bottom.

Left Alignment

• .tooltip-left-top: Positions tooltip to the left, top-aligned.
• .tooltip-left-middle: Left alignment at the middle.
• .tooltip-left-bottom: Left alignment at the bottom.

Bottom Alignment

• .tooltip-bottom-right: Positions tooltip at the bottom-right.
• .tooltip-bottom-middle: Bottom alignment centered.
• .tooltip-bottom-left: Bottom-left alignment.

Top Alignment

• .tooltip-top-right: Positions tooltip at the top-right.
• .tooltip-top-middle: Centered at the top.
• .tooltip-top-left: Top-left alignment.

Tooltip Themes

• .tooltip-light: Light background and dark text.
• .tooltip-dark: Dark background and light text.

Customisation

[data-tooltip] {
   --default-tooltip-hover-background-color: #e2edff;
  --default-tooltip-hover-text-color: #707070;
  --default-tooltip-hover-text-color: #707070;
  --default-tooltip-border-color: #80808020;
  --default-tooltip-z-index: 1;
}

Usage Guidelines