如何在ng2-tooltip-directive中通过mouseenter事件隐藏提示框？

Hey there! Switching from hiding the tooltip on mousemove to mouseenter is super straightforward—just swap out the event binding in your template. Here's the adjusted code first:

<div 
  (mouseenter)="closeTooltip()" 
  [tooltip]="TooltipComponent" 
  content-type="template" 
  show-delay="500" 
  placement="right" 
  theme="light"
>
  <ng-template #TooltipComponent>
    <app-tooltip-wrapper [data]="currentData"></app-tooltip-wrapper>
  </ng-template>
</div>

A Quick Note About Reliability #

Since ng2-tooltip-directive’s default behavior is to show the tooltip on mouseenter, you’ll want to make sure your closeTooltip() function is properly connected to the tooltip’s internal close method. If you haven’t already set this up, using a template variable to reference the tooltip directly is a more reliable approach:

<div 
  #tooltipRef="tooltip"
  (mouseenter)="tooltipRef.close()" 
  [tooltip]="TooltipComponent" 
  content-type="template" 
  show-delay="500" 
  placement="right" 
  theme="light"
>
  <ng-template #TooltipComponent>
    <app-tooltip-wrapper [data]="currentData"></app-tooltip-wrapper>
  </ng-template>
</div>

By adding #tooltipRef="tooltip", you get direct access to the tooltip’s API. Calling tooltipRef.close() will immediately hide the tooltip when the mouse enters the div, overriding the default show behavior perfectly.

内容的提问来源于stack exchange，提问作者Kamil Jarząb