Question

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

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

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

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

每个分配器都有＆＃39;工具提示＆＃39; class获取工具提示。此外，该分隔符中的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元素。

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

1 个答案: