CODEWITHSUNDEEP
javascripthtmlcssangular
user14679786
user14679786

Reputation:

How to keep and hide tooltip on mouse hover and mouse out

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;
}

Upvotes: 0

Views: 5226

Answers (1)

HamiD
HamiD

Reputation: 1090

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>

Upvotes: 1

Related Questions