C#/Blazor中HTML元素绑定onmouseover实现按钮Tooltip功能报错如何解决

你的问题核心是混淆了原生HTML事件和Blazor的组件事件绑定逻辑：

• 原生onmouseover属性是给JS执行的，无法直接调用C#后台方法。Razor渲染页面时会直接把@ChangeToolTipState(true)的返回值（你返回了Object，ToString后是System.Object）拼接到HTML属性里，导致JS执行时出现语法错误，就是你遇到的Unexpected identifier报错。
• 另外你没有在onmouseout事件里绑定隐藏Tooltip的逻辑，就算hover触发成功，提示框也不会自动消失。

1. 调整Razor组件代码 #

把原生事件替换为Blazor的@onmouseover/@onmouseout事件绑定，颜色hover效果推荐用CSS实现，避免在事件里混写样式逻辑：

<style>
    .icon-button-tooltip {
        padding: 8px;
        background-color: gray;
        font-size: 14px;
        font-weight: 100;
        color: white;
        cursor: default;
        position: absolute;
        right: -120px;
    }
    /* 新增hover样式替代事件里的颜色修改 */
    .icon-btn {
        color: @Color; 
        font-size: @(Size)px;
    }
    .icon-btn:hover {
        color: @hoverColor;
    }
</style>
<div @onclick="Click" id="iconButton"
     style="height: @(Size)px; width:@(Size)px; cursor: pointer; position: relative;">

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

2. 调整后台方法 #

把不需要返回值的方法改为void类型即可：

private void ChangeToolTipState(bool state)
{
    showToolTip = state;
}

如果确实需要同时执行JS逻辑和C#逻辑，可以用Blazor的JS互操作实现，不要直接在原生事件属性里混写C#调用代码，避免出现语法解析错误。

内容的提问来源于stack exchange，提问作者Franco