jQuery-ui 工具提示无法设置 css 字体颜色

Question

我正在使用 jQuery-UI v1.12.1 (jQuery 2.1.3) 来动态创建带有 HTML 内容的工具提示。虽然我可以使用 CSS 样式表完成大部分 HTML 样式，但由于某种原因，我无法在不使用 !important 的情况下更改不同类的字体颜色。

如果这有一个简单的答案：有一个明显的原因为什么我可以改变几乎所有的东西（例如背景、字体大小、重量等），除了使用 CSS“颜色”的字体颜色财产？

我的代码嵌入在许多其他代码中，我无法在此处发布，也不知道从哪里开始创建具有相同问题的玩具箱。我所知道的最好的就是记录一下我的工具提示管理的基本结构。我有一个定义了许多类的 CSS 样式表，其中许多具有重叠的属性。在我的 javascript 中，我注入 jQuery-UI 和 jQuery，并使用以下内容根据某些分隔符的属性和类名的状态创建工具提示：

$(function () {
    $(document).tooltip({
        content: function () {
            var html = do some stuff to determine html;
            return html;
        },
        classes: {'ui-tooltip': 'tooltip'}
    })
});

每个具有“工具提示”类的分隔符都会获得一个工具提示。此外，该分隔符中的 HTML 可能具有与特定跨度、div 等相关联的多个其他类。所有 CSS 都在单个样式表中定义。我没有使用 jQuery-UI css。

我可以让颜色起作用的唯一方法是使用 !important，我读过这是不好的做法。否则，字体颜色始终为灰色。

谢谢！

Answer 1

使用一个基本的工具提示示例，我有这个工作示例：

https://jsfiddle.net/Twisty/q9ay2w44/

HTML

<p><a href="#" title="That&apos;s what this widget is" data-tip-class="red">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native
  tooltip.
</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>
  <label for="age">Your age:</label>
  <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>

CSS

.tooltip {
  background: #fff;
  padding: 0.2em 0.4em;
  border-radius: 6px;
  display: inline-block;
}

.tooltip div {
 display: inline-block; 
}

.red {
  color: #F00;
}

JavaScript

$(function() {
  $(document).tooltip({
    items: "[title]",
    content: function() {
      var element = $(this);
      var tipClass = element.data("tip-class") ? element.data("tip-class") : "black";
      var wrap = $("<div>", {
        class: tipClass
      });
      wrap.html(element.attr("title"));
      return wrap;
    },
    classes: {
      'ui-tooltip': 'tooltip'
    }
  })
});

如果您的字体颜色没有改变，我怀疑在您的工具提示之后有其他东西在设置字体样式。如果您需要更多帮助，请使用此小提琴尝试解释或显示问题。

您会注意到我排除了您提到的 Jquery UI CSS。这会对显示一些通常会隐藏的额外 div 和 span 元素产生不利影响。