Question

在我的页面中，我使用工具提示，其中类名称为.tooltipcell到网格单元格，并使用工具提示，其中类名称为.tooltipbtn到按钮。现在我要更改背景颜色网格中的工具提示，但我不想影响按钮工具提示的背景颜色。如何做到这一点？我使用下面的代码，它会影响两个工具提示。

方法1：兼有效果

.k-widget.k-tooltip{
background-color:red; //set the desired color
}

方法2：兼有效果

div .k-widget.k-tooltip{
background-color:red; //set the desired color
}

Answer 1

你可以这样做：

.tooltipcell{background-color:green;}

.tooltipbtn{background-color:green;}

只是加入你的div .k-widget.k-tooltip可能会覆盖你可能需要更深入地定位它的样式：

div .k-widget.tooltipcell{background-color:green;}

div .k-widget.tooltipbtn{background-color:green;}

Answer 2

这是MarioD答案的修正案。

我没有测试它，但鉴于它有效，更好的做法是连接这些类。它可以节省css的大小并缩短加载时间。这样做：

div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
      background-color:green;
}

Answer 3

我在使用kendo工具提示时遇到了同样的问题。我想只在一个地方更改工具提示的CSS，其余的工具提示保持不变。

使用css，正常的方法是使用目标.widget and .k-tooltip CSS类。

虽然这会改变页面中的所有工具提示。

所以，因为我只想改变一个工具提示（与这篇文章相同的问题），我不得不做一个JS方法。所以，我不得不使用kendo工具提示的show功能。示例：

                   $('.target')..kendoTooltip({
                        position: 'bottom',
                        showAfter: 1000,
                        content: 'test',
                        function(e) {
                            e.sender.popup.element.addClass('customClass');
                            }
                    }).data('kendoTooltip');

我会尽量在这里发布一个jsfiddle。

安德烈

Answer 4

JS

 show: function (e) {
        e.sender.popup.element.addClass('red-tooltip');
    },

和CSS

.red-tooltip {
    background-color: #f00 !important;
}

如何在Kendo UI MVC中仅在网格中更改工具提示的背景颜色？

4 个答案: