title: How to change the style/css of a tooltip?
body: <p>first of all is this called a tooltip or am i on about something different?</p>
  
  <p>anyway, i have managed to get a tooltip working as can be seen in the image link below. but the little box that pops up saying 'Password must be more than 6 characters' how do i target and hit this and change the style. so far i have either not been able to change it or the box i am hovering over is styled.</p>
  
  <p><a href="http://www.tiikoni.com/tis/view/?id=1fb09eb" rel="nofollow">http://www.tiikoni.com/tis/view/?id=1fb09eb</a></p>
  
  <p>here is some code:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;label for="password"&gt;Password &lt;/label&gt; &lt;input type="password" id="pword" title="Password must be more than 6 characters long" &gt;&lt;br&gt;
  </code></pre>
  
  <p>js: </p>
  
  <pre><code>&lt;script&gt;
    $(function() {
      $( document ).tooltip({
          tooltipClass: "passwordTooltip"});
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>[title]:after{
      background: #333;
  }
  
  [title]:hover:after{
      background: #333;
  }
  </code></pre>