Building Materials Marketplace

Tooltip Directions

<div class="d-flex flex-wrap gap-2">
<MudTooltip Text="Tooltip on Top" Color="Color.Dark" Arrow="true" Placement="Placement.Top">
    <MudButton Color="Color.Primary" Variant="Variant.Filled">Tooltip on Top</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip on Right" Color="Color.Dark" Arrow="true" Placement="Placement.Right">
    <MudButton Color="Color.Primary" Variant="Variant.Filled">Tooltip on Right</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip on Bottom" Color="Color.Dark" Arrow="true" Placement="Placement.Bottom">
    <MudButton Color="Color.Primary" Variant="Variant.Filled">Tooltip on Bottom</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip on Left" Color="Color.Dark" Arrow="true" Placement="Placement.Left">
    <MudButton Color="Color.Primary" Variant="Variant.Filled">Tooltip on Left</MudButton>
</MudTooltip
</div>

Colored Tooltips

<div class="d-flex flex-wrap gap-2">
<MudTooltip Text="Tooltip Primary" Color="Color.Primary" Arrow="true" Placement="Placement.Top">
<MudButton Color="Color.Primary" Variant="Variant.Filled">Tooltip Primary</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip Secondary" Color="Color.Secondary" Arrow="true" Placement="Placement.Right">
    <MudButton Color="Color.Secondary" Variant="Variant.Filled">Tooltip Secondary</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip Warning" Arrow="true" Color="Color.Warning" Placement="Placement.Bottom">
    <MudButton Color="Color.Warning" Variant="Variant.Filled">Tooltip Warning</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip Info" Arrow="true" Color="Color.Info" Placement="Placement.Left">
    <MudButton Color="Color.Info" Variant="Variant.Filled">Tooltip Info</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip Success" Arrow="true" Color="Color.Success" Placement="Placement.Top">
    <MudButton Color="Color.Success" Variant="Variant.Filled">Tooltip Success</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip Danger" Arrow="true" Color="Color.Error" Placement="Placement.Right">
    <MudButton Color="Color.Error" Variant="Variant.Filled">Tooltip Danger</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip Light" Arrow="true" Class="bg-light mud-dark-text" Placement="Placement.Bottom">
    <MudButton Variant="Variant.Filled" Class="btn-light">Tooltip Light</MudButton>
</MudTooltip>
<MudTooltip Text="Tooltip Dark" Arrow="true" Color="Color.Dark" Placement="Placement.Left">
    <MudButton Variant="Variant.Filled" Color="Color.Dark" Class="mud-white-text">Tooltip Dark</MudButton>
</MudTooltip>
</div>

Tooltips on Links

Hover on the link to view the

<MudText Class="text-muted mb-0">
    Hover on the link to view the <MudTooltip Text="Link Tooltip" Color="Color.Primary" Arrow="true" Placement="Placement.Top">
    <MudLink Href="javascript:void(0);" Underline="Underline.None">Tooltip</MudLink>
    </MudTooltip>
</MudText>
</p>

With an SVG's

<MudTooltip Text="Home" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudLink Href="javascript:void(0);">
        <svg xmlns="http://www.w3.org/2000/svg" class="svg-primary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/></svg>
    </MudLink>
</MudTooltip>
<MudTooltip Text="Message" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudLink Href="javascript:void(0);">
        <svg xmlns="http://www.w3.org/2000/svg" class="svg-secondary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>
    </MudLink>
</MudTooltip>
<MudTooltip Text="Add User" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudLink Href="javascript:void(0);">
        <svg xmlns="http://www.w3.org/2000/svg" class="svg-warning" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z"/></g></svg>
    </MudLink>
</MudTooltip>
<MudTooltip Text="Send File" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudLink Href="javascript:void(0);">
        <svg xmlns="http://www.w3.org/2000/svg" class="svg-info" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z"/></svg>
    </MudLink>
</MudTooltip>
<MudTooltip Text="Action" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudLink Href="javascript:void(0);">
        <svg xmlns="http://www.w3.org/2000/svg" class="svg-success" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
    </MudLink>
</MudTooltip>

Disabled Elements

<MudTooltip Text="Disabled Tooltip" Arrow="true" Placement="Placement.Top" Color="Color.Dark">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="true">Disabled Button</MudButton>
</MudTooltip>

Tooltip For Images

<MudTooltip Text="Alex Carey" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Dot="true">
        <MudAvatar Class="">
            <MudImage Src="../assets/images/faces/12.jpg"></MudImage>
        </MudAvatar>
    </MudBadge>
</MudTooltip>
<MudTooltip Text="Marina Kai" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudBadge Color="Color.Success" Origin="Origin.BottomRight" Overlap="true" Dot="true">
        <MudAvatar Class="" Size="Size.Large">
            <MudImage Src="../assets/images/faces/3.jpg"></MudImage>
        </MudAvatar>
    </MudBadge>
</MudTooltip>
<MudTooltip Text="Tim Cook" Arrow="true" Placement="Placement.Top" Color="Color.Primary">
    <MudBadge Origin="Origin.BottomRight" Overlap="true" Dot="true">
        <MudAvatar Class=" mud-avatar-xl">
            <MudImage Src="../assets/images/faces/15.jpg"></MudImage>
        </MudAvatar>
    </MudBadge>
</MudTooltip>