无法在剑道中更改工具提示的自定义位置，而是更改其默认位置的上，左，右，下位置-Angular

问题描述

I need my tooltip like this

and I am getting like this! You can see the image has shadow type box because there is a class k-popup.

现在我的代码就是这样

.k-tooltip {
  Box-sizing: border-Box !important;
  width:500px;
  border: none;
  border-radius: 2px !important;
  background-color: #FFFFFF !important;
  Box-shadow: 0 2px 4px 0 rgba(22,34,58,0.11) !important;
  color: white !important;
  left:40%;
  
}


.k-callout-s {
  color: white;
  Box-shadow: 0 2px 4px 0 rgba(22,0.11) !important;
  
}

.k-tooltip-content{
  color: #3E3935;
  font-family: "Helvetica Neue";
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  text-align: justify;
}

<ng-template #alarmdes let-anchor>
   {{anchor.nativeElement.getAttribute('dataTooltip')}}
</ng-template>
<div  class="alarm" 
      showOn="click"
      kendoTooltip    
      [tooltipTemplate]="alarmdes"
      filter=".alarmdescp">
<kendo-grid-column field="alarmId" title="Alarm Type" [width]="250">
  <ng-template kendoGridCellTemplate let-dataItem> 
   <span>{{dataItem.alarmName}}</span>
    <span  class="alarmdescp" [attr.dataTooltip]="dataItem.description">
      <img src="../../assets/images/info.svg" alt="i"                                                  style="width:12px;height:12px;margin:10px;"/>
    </span>
  </ng-template>
 </kendo-grid-column>

工具提示也不适用于移动浏览器上的showOn =“ hover”。点击即可访问。

此外，将无法显式更改CSS。

解决方法

我们可以通过使用

来实现

.k-tooltip-wrapper {
  left : 30px !important;   //you can customize ur pos by using this class
}

.k-tooltip {
  box-sizing: border-box !important;
  width:500px;
  border: none;
  background-color: #0082c9 !important;
  box-shadow: 0 2px 4px 0 rgba(22,34,58,0.11) !important;
  color:#0082c9 !important;  
}

.k-callout-s {
  color: #0082c9 !important;
}

.k-tooltip-content{
  color: white;
  font-family: "Helvetica Neue";
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  text-align: justify;
}

 
import { ViewEncapsulation } from "@angular/core";

@Component({
selector : your selector,templateUrls : your template,styleUrls: your style url,encapsulation: ViewEncapsulation.None
})