Default Theme

TooltipPage

Overview

A good tooltip briefly describes unlabeled controls or provides a bit of additional information about labeled controls, when this is useful. It can also help customers navigate the UI by offering additional—not redundant—information about control labels, icons, and links. A tooltip should always add valuable information; use sparingly.

There are two components you can use to display a tooltip:

Tooltip: A styled tooltip that you can display on a chosen target.
TooltipHost: A wrapper that automatically shows a tooltip when the wrapped element is hovered or focused.

Usage

Default Tooltip

<TooltipHost>
    <TooltipContent></TooltipContent>
    <ChildContent>
        <DefaultButton>Hover to see a tooltip</DefaultButton>
    </ChildContent>
</TooltipHost>

<TooltipHost GapSpace="10">
    <TooltipContent>
        Hey, look here!
    </TooltipContent>
    <ChildContent>
        <DefaultButton>With gap</DefaultButton>
    </ChildContent>
</TooltipHost>

<TooltipHost IsBeakVisible="false">
    <TooltipContent>
        Hey, look here!
    </TooltipContent>
    <ChildContent>
        <DefaultButton>Without beak</DefaultButton>
    </ChildContent>
</TooltipHost>

Tooltip wrapping inline or inline-block elements

In some cases when a TooltipHost is wrapping inline-block or inline elements, the positioning of the Tooltip may be off. In these cases, it's recommended to set the TooltipHost's{' '} display property to inline-block, as in the following example.

<div>
    In some cases when a TooltipHost is wrapping <code>inline-block</code> or <code>inline</code> elements, the
    positioning of the Tooltip may be off. In these cases, it's recommended to set the TooltipHost's{' '}
    <code>display</code> property to <code>inline-block</code>, as in the following example.
    <br />
    <br />
    <TooltipHost GapSpace="0">
        <TooltipContent>
            Incorrect positioning
        </TooltipContent>
        <ChildContent>
            <button style="padding:10px;">
Hover for incorrect positioning
            </button>
        </ChildContent>
    </TooltipHost>
    <TooltipHost Style=" display: inline-block;"
 GapSpace="0">
        <TooltipContent>
            Correct positioning
        </TooltipContent>
        <ChildContent>
            <button style="padding:10px;">
Hover for correct positioning
            </button>
        </ChildContent>
    </TooltipHost>
</div>

Tooltip with custom content

<TooltipHost Delay=TooltipDelay.Zero
             DirectionalHint=DirectionalHint.BottomCenter
             Style="display: inline-block;">
    <TooltipContent>
        <ul style="margin: 10px; padding: 0">
            <li>1. One</li>
            <li>2. Two</li>
        </ul>
    </TooltipContent>
    <ChildContent>
        <DefaultButton Text="Hover over me" />
    </ChildContent>
</TooltipHost>

Tooltip with a closing delay

<TooltipHost CloseDelay="500"
             GapSpace="0"
             Style="display: inline-block;">
    <TooltipContent>
        This is the tooltip
    </TooltipContent>
    <ChildContent>
        <DefaultButton Text="Interact with my tooltip" />
    </ChildContent>
</TooltipHost>

Tooltip only on overflow

Force text to overflow

Show tooltip when parent's content overflows

This is the parent element.

This is the TooltipHost area. If the parent element's content overflows, hovering here will show a tooltip (anchored to the parent element).

Show tooltip when TooltipHost's content overflows

This is the TooltipHost area. If the TooltipHost's content overflows, hovering here will show a tooltip (anchored to the TooltipHost).

<div>
    <Toggle Label="Force text to overflow" InlineLabel Checked=@shouldOverflow CheckedChanged="@OnOverFlowChange" />
    <style>
        .example {
            margin-top: 20px;


        }

        .parent {
            padding: 10px;
            border: 2px dashed var(--palette-NeutralTertiary);


        }

        .overflow {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 200px;
        }
    </style>
    @* Example of TooltipOverflowMode.Parent *@
    <div class="example">
        <Label>Show tooltip when parent's content overflows</Label>

        @* This parent element will overflow *@
        <div class="parent @(shouldOverflow ? "overflow" : "")">
            <Label @ref=@parent>This is the parent element.</Label>
            <TooltipHost OverflowMode=TooltipOverflowMode.Parent
         OnTooltipToggle=SetParentTooltipVisible
         Parent=@parent
         Style="display: block; padding: 10px; background-color: var(--palette-ThemeLighter)">
<TooltipContent>
    If the parent element's content overflows, hovering here will show a tooltip (anchored to the parent element).
</TooltipContent>
<ChildContent>
    This is the TooltipHost area.
    <span>@contentParent</span>
</ChildContent>
            </TooltipHost>
        </div>
    </div>

    @* Example of TooltipOverflowMode.Self *@
    <div class="example" >
        <Label>Show tooltip when TooltipHost's content overflows</Label>

        <TooltipHost OverflowMode=TooltipOverflowMode.Self
     HostClassName="@(shouldOverflow ? "overflow" : "")"
     OnTooltipToggle=@SetParentTooltipVisible
     Style="display: block; padding: 10px; background-color: var(--palette-ThemeLighter)">
            <TooltipContent>
@contentSelf
            </TooltipContent>
            <ChildContent>
This is the TooltipHost area. @contentSelf
            </ChildContent>
        </TooltipHost>
    </div>
</div>

Tooltip on absolutely-positioned element