在 C#/Blazor 中的 html 元素中为 ONMOUSEOVER 赋予功能

Question

尝试制作一个共享的可重用组件，并且我正在尝试获取一个工具提示来处理我的按钮，因此我想在 html 元素内提供一个 onmouseover 方法，该方法将设置一个布尔值以查看该人是否悬停和因此显示工具提示。

html/razor 组件：

<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>

方法：

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

        return new Object();
    }

悬停时出错：

提前谢谢你

Answer 1

这不使用您的代码，而是演示如何构建使用标准 Html 工具提示和 :hover 工具提示的组件，您可以在其中动态设置工具提示。

一个使用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);
    }
}

使用悬停的不同类型的工具提示控件：

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>();

}

还有一个测试页：

@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 2

1. 使用 mouseenter 和 mouseleave 代替 mouseover

2. 创建一个名为 EventHandlers.cs 的类

添加以下代码：

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

    }
}

在此讨论https://github.com/dotnet/aspnetcore/issues/13104

Answer 3

解决方案很简单。只需在 onmouseover 的前面加上@infront，它就会使用 blazor 的 onmouseover，然后在方法内部也进行着色。

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

方法：

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