title: Overriding CSS styles of the jQuery UI Tooltip widget
body: <p>I am using the jQuery UI <a href="https://jqueryui.com/tooltip/">Tooltip widget</a></p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="i1"&gt;
          &lt;a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ"&gt;
              &lt;span class="ui-icon ui-icon-search"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"&gt;&lt;span class="ui-icon ui-icon-info"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#inf-3"title="ΕΠΙΠΕΔΑ"&gt;&lt;span class="ui-icon ui-icon-copy"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>and I wrote the following CSS based on their example and it works like a charm:</p>
  
  <pre><code>.tooltip {
      display:none;
      background: black;
      font-size:12px;
      height:10px;
      width:80px;
      padding:10px;
      color:#fff; 
      z-index: 99;
      bottom: 10px;
      border: 2px solid white;
  /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
  }
  </code></pre>
  
  <p><br>
  But I got 3-4 tooltips that I want to look different (like the example html above) so I wrapped them inside a class 
  and did this:</p>
  
  <pre><code>.i1 .tooltip  {
      display:none;
      background: red;
      font-size:12px;
      height:40px;
      width:80px;
      padding:20px;
      color:#fff; 
      z-index: 99;
      bottom: 10px;
      left: 50px important!;
      border: 2px solid white;
  /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
  }
  </code></pre>
  
  <p>which does absolutely nothing. How can I override the generic <em>.tooltip</em> to customize certain tooltips differently?</p>
  
  <p>Thanks in advance</p>