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

Question

I have igx-grid in which I am using igxTooltip . When I am hovering on grid cell, and the tooltip is showing, and when I am going to hover on tooltip, it automatically hide. I want to make that to keep tooltip when I am hovering on tooltip and it should hide when mouse it out.

This is I tried.

Html code:

<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 code:

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

.pointerClass {
  display: none;
}

.pointerClass :hover {
  display: block;
}

Answer 1

Something like this?

 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>