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