Create Tooltip component for Blazor

In this new post, I want to create a Tooltip component for Blazor WebAssembly. The tooltip, also known as infotip or hint, is a common graphical user interface element in which, when hovering over a screen element or component, a text box displays information about that element (such as a description of a button’s function, or what an abbreviation stands for). The tooltip is displayed continuously as long as the user hovers over the element.

Now, in the following image you see the result of this post.

So, at the end of this post, you can add the tooltip in any part of your page like

<h3>Welcome to your new <Tooltip Text="Blazor is awesome!">app</Tooltip>.</h3>
<p>
	This is an example with <Tooltip Text="This is quite cool!">normal</Tooltip> code.
</p>

Creating the component

The first thing we’re going to do is create a new component called Tooltip.razor and add the following code:

<div class="tooltip-wrapper">
    <span>@Text</span>
    @ChildContent
</div>

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

The component has two parameters, ChildContent and Text. When we use the component, it’s going to wrap the markup where we want the tooltip to display. The wrapped markup will be captured by the ChildContent parameter and displayed inside the main div of our tooltip. The other parameter Text, is what we will use to set the text that the tooltip will display.

So, that’s all there is in terms of Razor code! The real magic to making this all work is in the CSS, taking advantage of Blazor’s new CSS isolation feature.

Adding the CSS

First, to use CSS isolation in Blazor we need to create a CSS file with the same name as the component the styles are used by. In our case the component is called, Tooltip.razor.

So, our stylesheet needs to be called Tooltip.razor.css. Once this is done we can add the following styles:

.tooltip-wrapper {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	cursor: help;
}

span {
	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;
	font-size: 12px;
}

	span::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 span {
	visibility: visible;
}

The first class, .tooltip-wrapper is applied to the container div of the component. It makes the div render as inline-block so the document flow isn’t disrupted. It also sets it’s position as relative. This means we can then absolute position the child span (tooltip text) where we need, relative to the parent div. The final two rules add some styling to show the user there is a tooltip available.

The next set of styles apply to the span element, this contains the tooltip text that will be shown. By default, the span is hidden and it’s absolutely positioned relative to the parent div. With the styles shown above, the tooltip will be shown above the content which is contained between the start and end tags of the Tooltip component.

The next style is what is called a pseudo element. This is going to add an element to the DOM. What this style does is create a small arrow at the bottom of the tooltip text pointing to the content that the tooltip is wrapping.

The final style will show the span containing the tooltip text whenever the user hovers over the parent div with their cursor.

Using the Tooltip

Now, in order to use the tooltip, just wrap it around the content you want the user to be able to hover over to show the tooltip text, and add whatever message you want to be displayed.

This is an example with <Tooltip Text="This is quite cool!">normal</Tooltip> code.

Conclusion

So, we are at the end of this post. I hope you learnt how to create Tooltip component for Blazor and use this technic for other components. Will do!

More documentation and code

For more documentation and example about Blazor, here same links:

• Getting Started With C# And Blazor
• Setting Up A Blazor WebAssembly Application
• Working With Blazor’s Component Model
• Secure Blazor WebAssembly With IdentityServer4
• Blazor Using HttpClient With Authentication
• InputSelect component for enumerations in Blazor
• Use LocalStorage with Blazor WebAssembly
• Look at my GitHub