New line in MudToolTip text

Question

Please guide how to add line break in MudToolTip text. I have a string variable toolTipText in my MudBlazor application. This variable is used as Text in MudTooltip. I want adding System.Environment.NewLine as two lines separator, but it does not effect and tooltip shows only one line. My code is as below:

"Line 1 text" and "Line 2 text" are shown together on one line.

Have you tried `
` instead of `System.Environment.NewLine`? – stuartd Oct 16 '22 at 23:17 — stuartd, Oct 16 '22 at 23:17

score 1 · Answer 1 · answered Oct 17 '22 at 06:09

Instead of providing a string as text, you can also embed HTML in your tooltip:

<MudTooltip>
    <ChildContent>
        <MudIconButton Icon="@Icons.Filled.Info" />
    </ChildContent>
    <TooltipContent>
        <MudText Typo="Typo.body2">Line 1 text</MudText>
        <MudText Typo="Typo.body2">Line 2 text</MudText>
    </TooltipContent>
</MudTooltip>

Try online: https://try.mudblazor.com/snippet/wOQQPYbhQmuAymWu

score 0 · Answer 2 · answered Oct 17 '22 at 00:18

Use white-space: pre-line;. Add this class to your app.css file:

.white-space-pre-line {
    white-space: pre-line;
}

And add it to the tooltip:

<MudTooltip Text="@tooltipText" Class="white-space-pre-line" ...>
    ...
</MudTooltip>

Check: Line break in HTML with '\n'

New line in MudToolTip text

2 Answers2