Getting Started

In this tutorial, you will learn how to make your own tooltip component in Blazor. We will also see how to use the Blazor MarkupString with the tooltip.

Create the Tooltip Component

Step 1:

In the folder pages, Add a new component namely Tooltip.razor.

Step 2:

In the Tooltip component, add the following html code for the tooltip wrapper:

<div class="tooltip-wrapper">

    <span id="spanText">@((MarkupString)Text)</span>

    @ChildContent

</div>

Step 3:

Then we will add the following CSS script:

.tooltip-wrapper { position: relative; display: inline-block; border-bottom: 1px dotted black; cursor: help; } #spanText { visibility: hidden; position: absolute; width: 120px; bottom: 100%; left: 50%; margin-left: -60px; background-color: #363636; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; z-index: 1; } #spanText::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip-wrapper:hover #spanText { visibility: visible; }

In the @code block we will the the following parameters:

[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public string Text { get; set; }

Reusable Tooltip Component

You can now use the tooltip component by adding the below in the pages you want it to be displayed

<Tooltip Text="<b>This is a tooltip</b>">Your Text</Tooltip>

The tooltip text will display This is a tooltip on hovering on Your Text. 

It will be bold as the MarkupString will convert the <b> </b> tags to html instead of rendering it as text. 

Make sure to watch the video tutorial below as I have explained MarkupString and how to use the tooltip in more details.