如何在angular6中添加工具提示

Question

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

<ng-template #imageTemplate let-dataItem="dataItem">
        <!-- <input style="width:10%;" type="checkbox" [checked]="dataItem.role_perm"/> -->
        <div *ngIf="dataItem.role_permission == true">
        <div (mouseenter)="displayMessage(dataItem.role_id)" (mouseleave)="closepopover()" >
        <img src="/src/Pass.png" style="widows: 40px;;height:40px;" title="hi">
        <div class="tooltip">
          <span class="tooltiptext">
              blue
          </span>
        </div>
      </div></div>

我无法为表格中的单元格添加工具提示（我正在使用KendoGrid）。我正在将ngtemplate传递给包含工具提示的网格单元，但它不起作用。有什么方法可以在角度6中添加工具提示吗？请帮助