Search code examples
blazortooltipmudblazor

How to apply the css "display:block" to MudBlazor Tooltip?


We have a tooltip and want to place an url inside which should be clickable. So the tooltip should stay if we hover over with the mouse. When we leave the tooltip window it should disappear.

Example how it works in google:

Example of Google Spreadsheet

In CSS it works with display:block but not with Tooltip of Mudblazor.


Solution

  • Here's two ways you can do this.

    1. Override the MudTooltip's default implementation of the IsVisible property by defining your own implementation of the IsVisibleChanged EventCallback. This involves creating multiple events for the child content tool and the tooltip content.

    2. Create your own Tooltip ( you can still style it to match the MudTooltip).

    This is easier shown via a demo -> Mudblazor Snippet