jQuery的UI提示不能设置CSS字体颜色

Question

我使用jQuery UI的v1.12.1（jQuery的2.1.3）动态创建HTML内容的提示。虽然我可以得到大部分使用CSS样式表所做的HTML造型，由于某种原因，我无法改变不同类别的字体颜色，而无需使用！重要的。

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

我的代码被嵌入到许多其他代码中，我不能在此处发布它，也不知道从哪里开始创建具有相同问题的玩具盒。我所知道的最好的做法是记录一下我的工具提示管理的基本结构。我有一个定义了许多类的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。

我可以得到颜色的工作的唯一方法是，如果我使用！重要的是，我已经读了是不好的做法。否则，字体颜色始终为灰色。

谢谢！

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元素的不利影响。