Creating a ToolTip Component in Blazor

[giscus[bot]]

Creating a ToolTip Component in Blazor

In this blog post we will create a ToolTip component in Blazor from scratch. We will use the Blazor WebAssembly template to create a new project. We will then add a ToolTip component to the project and use it in the Index page. We will also add some styling to the ToolTip component.
The advantage over using a library is that we can customize the component to our needs as well as keeping it simple! So let's get started!

https://steven-giesel.com/blogPost/fda6848e-61f6-40d0-95c8-45925712b462

[VaclavElias]

The tooltip subject is a bit complicated.. I would probably just used css tooltip for the simplicity and just basic styling and accepting its limitations (described below).

I am going to guess, that your tooltip won't be visible if it is applied to the top element, right at the top of the screen.

Bootstrap is using Popper.js to solve this issue and adjust the tooltip position so it is always visible. Not sure how it works but if you apply the tooltip for some element right at the top of the screen, the tooltip will pop up at the bottom instead.

I wish this logic was somehow inbuilt in the browser itself 🤔🙂.

[linkdotnet]

Yes, you are absolutely right. The tooltip has a rather fixed position, so as you said, if the element is on top of the screen, it will be invisible.

It always depends on your needs. For my needs, this solution was "good enough".