我爱编程

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>

要注意的 问题:

在修改的样式,只能在这个页面中使用,否则会影响全局中的样式。

也就是说那个页面用,就引哪个页面,否则会将其他页面中的样式也冲突掉!

上一篇下一篇

猜你喜欢

热点阅读