鼠标悬停时出现 2 个工具提示

Question

这是我的代码。我在 Safari 中收到 2 个工具提示。我想要一个我已经准备好的工具提示。

您能否告诉我如何使默认浏览器工具提示消失？

<div  
  [attr.id]="'nodeRow-'+node.id" 
  [ngClass]="selectedID===node.id?'node-title-active':'node-title-inactive'" 
  class="row node-title" 
  (mouseenter)="overlayEffecton(node)" 
  (mouseleave)="overlayEffectoff(node)" 
  matTooltip="{{node.name}}" 
  matTooltipPosition="right" 
  matTooltipHideDelay="3" 
  matTooltipClass="right">

Answer 1

看起来您的框架正在渲染的页面上生成标题属性。您需要将 title 属性设置为空。

示例代码（未经测试）：

import { Directive, ElementRef, Renderer2 } from '@angular/core';
    
    @Directive({
      selector: '[disableTitleTooltip]'
    })
    export class DisableTitleTooltipDirective {
      constructor(private el: ElementRef, private renderer: Renderer2) {
        this.renderer.setAttribute(this.el.nativeElement, 'title', '');
      }
    }

并将选择器添加到您的元素中：

<div  
  [attr.id]="'nodeRow-'+node.id" 
  [ngClass]="selectedID===node.id?'node-title-active':'node-title-inactive'" 
  class="row node-title" 
  (mouseenter)="overlayEffecton(node)" 
  (mouseleave)="overlayEffectoff(node)" 
  matTooltip="{{node.name}}" 
  matTooltipPosition="right" 
  matTooltipHideDelay="3" 
  matTooltipClass="right"
  disableTitleTooltip>