how to show tooltip to the above of grid cell

I am using igx-grid in which, the column which having long description is entirely showing. I want to show only one line of it, and remaining line on tooltip. The tooltip part is done, but i can see the entire line in that column like this.

enter image description here

to solve this problem i have written and it worked well

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

But now, my tooltip is not showing. It hidden somewhere, in inspect element, it is present, but not showing above of grid cell

This is i tried

html

 <div *ngIf="column.isTooltip">
            <div class="tooltip1">{{ value }}
              <span class="tooltiptext">{{ value }}</span>
            </div>
            
          </div>

css

.tooltip1 {
    position: relative;
    display: inline-block;
    width : 130px;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .tooltip1 .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    margin: -100px;
  }
  
  .tooltip1:hover .tooltiptext {
    visibility: visible;
  }