MudTreeView Tooltip异常：父级节点Tooltip同时显示问题求助

问题原因 #

DOM事件冒泡机制导致鼠标悬停在子文件夹节点时，事件会向上传递到所有父节点，触发它们的Tooltip显示逻辑，从而出现多个Tooltip同时展示的情况。

解决方案 #

方案一：使用MudTooltip内置的事件阻止功能 #

在每个节点的MudTooltip组件中添加StopPropagation="true"，直接阻止鼠标事件向上冒泡，确保只有当前悬停的节点触发Tooltip：

<MudTreeItem Value="@folder">
    <Template>
        <MudTooltip Text="@folder.CreationDate" StopPropagation="true">
            <MudTreeItemContent>
                <MudIcon Icon="@Icons.Material.Filled.Folder" />
                <span>@folder.Name</span>
            </MudTreeItemContent>
        </MudTooltip>
    </Template>
    @foreach (var subFolder in folder.SubFolders)
    {
        <MudTreeItem Value="@subFolder">
            <Template>
                <MudTooltip Text="@subFolder.CreationDate" StopPropagation="true">
                    <MudTreeItemContent>
                        <MudIcon Icon="@Icons.Material.Filled.Folder" />
                        <span>@subFolder.Name</span>
                    </MudTreeItemContent>
                </MudTooltip>
            </Template>
        </MudTreeItem>
    }
</MudTreeItem>

方案二：手动控制Tooltip可见性 #

通过变量跟踪当前悬停的节点ID，绑定Visible属性精确控制仅当前节点Tooltip显示：

@code {
    private Guid? _currentHoveredFolderId;

    public class Folder
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public string CreationDate { get; set; }
        public List<Folder> SubFolders { get; set; } = new();
    }
}

<MudTreeItem Value="@folder">
    <Template>
        <div 
            @onmouseover="() => _currentHoveredFolderId = folder.Id" 
            @onmouseout="() => _currentHoveredFolderId = null"
        >
            <MudTooltip 
                Text="@folder.CreationDate" 
                Visible="@(_currentHoveredFolderId == folder.Id)"
            >
                <MudTreeItemContent>
                    <MudIcon Icon="@Icons.Material.Filled.Folder" />
                    <span>@folder.Name</span>
                </MudTreeItemContent>
            </MudTooltip>
        </div>
    </Template>
    @foreach (var subFolder in folder.SubFolders)
    {
        <MudTreeItem Value="@subFolder">
            <Template>
                <div 
                    @onmouseover="() => _currentHoveredFolderId = subFolder.Id" 
                    @onmouseout="() => _currentHoveredFolderId = null"
                >
                    <MudTooltip 
                        Text="@subFolder.CreationDate" 
                        Visible="@(_currentHoveredFolderId == subFolder.Id)"
                    >
                        <MudTreeItemContent>
                            <MudIcon Icon="@Icons.Material.Filled.Folder" />
                            <span>@subFolder.Name</span>
                        </MudTreeItemContent>
                    </MudTooltip>
                </div>
            </Template>
        </MudTreeItem>
    }
</MudTreeItem>

两种方案都能实现仅当前鼠标聚焦的文件夹显示对应创建日期Tooltip的需求，方案一更简洁，方案二灵活性更高，可根据实际场景选择。

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