0

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;
}
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
  • Does this answer your question? [Plain JavaScript tooltip](https://stackoverflow.com/questions/18359193/plain-javascript-tooltip) – Shounak Das Nov 24 '20 at 13:07
  • It seems ```igxtooltip``` is handling the logic of hiding and showing tooltip. May be you can override that.Secondly,you're hiding and showing ```pointerClass``` div,instead I think you should try that with ```#tooltipRef1``` div. – Abu Taha Nov 25 '20 at 06:53

1 Answers1

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>
HamiD
  • 1,075
  • 1
  • 6
  • 22