title: jQuery-ui tooltip cannot set css font color
body: <p>I am using jQuery-UI v1.12.1 (jQuery 2.1.3) to dynamically create tooltips with HTML content. While I can get most of the HTML styling done using a CSS stylesheet, for some reason I am unable to change the font color of different classes without using !important. </p>
  
  <p><strong>In case this has an easy answer: Is there an obvious reason why I would be able to change pretty much everything (e.g. background, font size, weight, etc) except the font color using the CSS "color" property?</strong></p>
  
  <p>My code is embedded in a lot of other code that I cant post it here, nor do I know where to start to create a toy case that has the same problems. The best I know to do is record a little about the basic structure of my tooltip management. I have a CSS stylesheet with many classes defined, many of which have overlapping properties. In my javascript, I inject jQuery-UI and jQuery and use the following to create a tooltip based on the status of certain dividers' attributes and class names:</p>
  
  <pre><code>$(function () {
      $(document).tooltip({
          content: function () {
              var html = do some stuff to determine html;
              return html;
          },
          classes: {'ui-tooltip': 'tooltip'}
      })
  });
  </code></pre>
  
  <p>Each divider that has the 'tooltip' class gets a tooltip. In addition, the HTML in that divider may have multiple other classes associated with particular spans, divs, etc. All the CSS is defined in a single stylesheet. I am not using the jQuery-UI css.</p>
  
  <p>The only way I can get colors to work is if I use !important, which I have read is bad practice. Otherwise, the font color is always gray.</p>
  
  <p>Thanks!</p>