kendo ui 中 tooltip样式修改
2018-02-09 本文已影响110人
_信仰zmh
近期碰到一个问题,做了一个表格,本来是按照之前的写法写的,完全没问题,后来说接口改过了,必须使用调用serviceId的写法,让把表格改成kendo ui 中的grid格式。
这里最大的问题就是grid 中的模板,grid 的模板都写在了js里面,并且之前的uib-tooltip就并不支持了,而且angular中的ng-click、ng-class、ng-disabled就不能用。
这里想到了kendoui 中的tooltip,但是样式又更之前的不一样。
kendoui tooltip的默认样式:
修改tooltip的样式:
<!--设置tooltip的样式-->
<style>
/*最外层的样式,这里将外层与内容背景色设置统一*/
div[role=tooltip].k-tooltip{
background: #FFFF76;
}
/*内容的样式*/
.k-tooltip-content{
z-index: 1070;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
line-break: auto;
padding: 0;
background: #FFFF76;
color: #9E3023;
}
/*下边的小三角样式*/
.k-callout {
/*border-bottom-color: #5c9acf;*/
border: none;
}
</style>
要注意的 问题:
在修改的样式,只能在这个页面中使用,否则会影响全局中的样式。
也就是说那个页面用,就引哪个页面,否则会将其他页面中的样式也冲突掉!