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

【问题标题】：How to change the background color of the tooltip only in grid in Kendo UI MVC?如何仅在 Kendo UI MVC 的网格中更改工具提示的背景颜色？
【发布时间】：2014-04-13 16:22:30
【问题描述】：

在我的页面中，我使用类名为.tooltipcell的工具提示到网格单元格，并且还使用类名为.tooltipbtn的工具提示到按钮。现在我想更改网格中工具提示的背景颜色,但我不想影响按钮工具提示的背景颜色。怎么做呢？我用下面的代码，它会影响两个工具提示。

method1：两种效果

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

方法2：两种效果

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

【问题讨论】：

标签： css kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案1】：

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

和 CSS

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

【讨论】：

【解决方案2】：

你可以这样做：

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

【讨论】：

【解决方案3】：

这是对 MarioD Answer 的修订。

我没有对其进行测试，但鉴于它有效，更好的做法是将这些类连接起来。它节省了 css 的大小并缩短了加载时间。这样做：

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

【讨论】：

我试过了，但是你的代码似乎没有改变工具提示的背景颜色，它是改变单元格的背景颜色。
就像我说的，我假设 MarioD 代码有效。但我会做自己的测试并编辑我的答案。同时，如果您仅为这部分拉取 HTML 源代码，将会有所帮助。否则我将不得不创建一个通用示例

【解决方案4】：

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

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

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

因此，由于我只想更改一个工具提示（与这篇文章相同的问题），我不得不采用 JS 方法。所以，我不得不使用剑道工具提示的显示功能。示例：

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

稍后我会尝试在这里发布一个 jsfiddle。

安德烈

【讨论】：