New line in MudToolTip text-CodePudding

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.

CodePudding user response：

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'

CodePudding user response：

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