如何解决无法在剑道中更改工具提示的自定义位置,而是更改其默认位置的上,左,右,下位置-Angular
现在我的代码就是这样
.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
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。