如何在鼠标悬停和鼠标移出时保留和隐藏工具提示

Question

我有igx-grid，我在其中使用igxTooltip。当我将鼠标悬停在网格单元上时，工具提示正在显示，当我将鼠标悬停在工具提示上时，它会自动隐藏。我想让它在我将鼠标悬停在工具提示上时保留工具提示，并且当鼠标移出时它应该隐藏。

这是我试过的。

HTML代码：

<div *ngIf="column.isTooltip">
  //cell of grid
  <div class="heightTarget" [igxTooltipTarget]="tooltipRef1">{{ value }}</div>
</div>
<div>
  <div #tooltipRef1="tooltip" igxTooltip>
    //this is tooltip which is showing
    <div class="poiterClass">{{ value }}</div>
  </div>
</div>

CSS代码：

.heightTarget {
  width: 130px;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pointerClass {
  display: none;
}

.pointerClass :hover {
  display: block;
}

Answer 1

这样的？

var text = document.querySelector(".tooltip");
text.addEventListener("mouseover", function(){
  text.querySelector(".tooltiptext").style.display = "block";
});

text.addEventListener("mouseout", function(){
  text.querySelector(".tooltiptext").style.display = "none";
});

tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  display:none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>