在 Kendo - Angular 中无法更改工具提示的自定义位置，而是其默认位置顶部、左侧、右侧、底部

Question

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,34,58,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。

Answer 1

我们可以使用

来实现

.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
})

在 Kendo - Angular 中无法更改工具提示的自定义位置，而是其默认位置顶部、左侧、右侧、底部

Wont be able to change custom position of Tooltip rather its default position top, left, right, bottom in Kendo - Angular

kendo-ui

kendo-ui-angular2

angular