Give function to ONMOUSEOVER inside an html element in C#/Blazor

Question

Trying to make a shared reusable component and I am trying to get a tooltip to work on my buttons, So I want to give a method to onmouseover inside the html element that will set a bool to see if the person is hovering and thus disaply the tooltip.

html/razor component:

<style>
        .icon-button-tooltip {
            padding: 8px;
            background-color: gray;
            font-size: 14px;
            font-weight: 100;
            color: white;
            cursor: default;
            position: absolute;
            right: -120px;
        }

    </style>
    <div @onclick="Click" id="iconButton"
         style="height: @(Size)px; width:@(Size)px; cursor: pointer; position: relative;">

        @if (Loading == ButtonLoading.Normal)
        {
            
            <i onmouseover="this.style.color =@hoverColor, @ChangeToolTipState(true)"
               onmouseout="this.style.color=@onMouseOutColor"
               class="fa @Icon" style="color:@Color; font-size:@(Size)px;"></i>
        }
        else
        {
            <i class="fa @Spinner fa-spin" style="color:@Color; font-size:@(Size)px;"></i>
        }
        @if (ToolTip != string.Empty && showToolTip)
        {
            <div class="icon-button-tooltip">
                @ToolTip
            </div>
        }


    </div>

method:

private Object ChangeToolTipState(bool state)
    {
        if (state) showToolTip = true;
        else showToolTip = false;

        return new Object();
    }

Erorr when I hover:

Thank you in advance

Answer 1

1. Use mouseenter and mouseleave instead of mouseover

2. Create a class called EventHandlers.cs

add the following code:

namespace <yourProjectName>
{
    [EventHandler("onmouseenter", typeof(EventArgs), true, true)]
    [EventHandler("onmouseleave", typeof(EventArgs), true, true)]
    public static class EventHandlers
    {

    }
}

Discussed here https://github.com/dotnet/aspnetcore/issues/13104

Answer 2

This doesn't use your code, but demonstrates how to build components that use standard Html tooltips and :hover tooltips where you set the tooltip dynamically.

A simple button control using html:

ButtonControl.razor

@namespace StackOverflow.Answers
<button @onclick="OnClick" title="@this.ToolTip" @attributes="this.UserAttributes">@ChildContent</button>

@code {

    [Parameter] public EventCallback<MouseEventArgs> Clicked { get; set; }
    [Parameter] public string ToolTip { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();

    private async Task OnClick(MouseEventArgs e)
    {
        if (Clicked.HasDelegate)
            await Clicked.InvokeAsync(e);
    }
}

A different type of tooltip control using hover:

ToolTipControl.razor

@namespace StackOverflow.Answers
<div class="ttip">
    @ChildContent
    <span class="tooltiptext">@this.ToolTip</span>
</div>

<style>
    /* Tooltip container */
    .ttip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    }

        /* Tooltip text */
        .ttip .tooltiptext {
            visibility: hidden;
            width: 250px;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            /* Position the tooltip text */
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
            text-overflow: ellipsis;
        }
            /* Tooltip arrow */
            .ttip .tooltiptext::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }

        /* Show the tooltip text when you mouse over the tooltip container */
        .ttip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
</style>

@code {
    [Parameter] public string ToolTip { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public IDictionary<string, object> UserAttributes { get; set; } = new Dictionary<string, object>();

}

and a test page:

@page "/"
@using StackOverflow.Answers.Components

<div class="m-2 p-2">
    <ButtonControl Clicked="this.ButtonClick" class="btn btn-dark" ToolTip=@this.toolTip>Hello Tooltip</ButtonControl>
</div>

<ToolTipControl ToolTip=@this.toolTip>Hover to see me</ToolTipControl>

@code {
    bool _show1;

    string toolTip => _show1
        ? "Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et"
        : "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.";

    void ButtonClick(MouseEventArgs e)
    {
        var x = true;
        this._show1 = !this._show1;
    }
}

Answer 3

The solution was simple. Just add @ infront of onmouseover then it will uses blazor's onmouseover and then do the coloring inside the method as well.

//this.style.color=@hoverColor + 
    <i @onmouseover="@(() => ChangeToolTipState(true))"
    onmouseout="this.style.color=@onMouseOutColor"
    class="fa @Icon" style="color:@Color; font-size:@(Size)px;"></i>

The method:

private void ChangeToolTipState(bool show)
    {
        if (show) showToolTip = true;
        else showToolTip = false;
    }