title: Tooltip not working with my css
body: <p>Why doesn't my tooltip work with my css in here? <strong><a href="http://jsfiddle.net/BG4Sn/" rel="nofollow">http://jsfiddle.net/BG4Sn/</a></strong></p>
  
  <p>Please see the jsfiddle, the problem is, that with my css included, the tooltip won't show up true box tooltip after mouse enter on links <code>tooltip1</code> &amp; <code>tooltip2</code> &amp; <code>tooltip3</code> . When I remove the link to my css in the html head, it works true.</p>
  
  <pre><code>function tool_tip() {
          //var tip = $('.tool_tip').closest('li').find('div').clone();
          $('.tool_tip').mouseenter(function () {
              var $this = $(this),
                  $div = $this.closest('li').find('div');
              $(this).attr('title', '');
              $div.fadeTo(300, 0.9);
          }).mousemove(function (e) {
  
              $('.tooltip').css('bottom', e.pageY + -10);
              $('.tooltip').css('left', e.pageX + 10);
  
          }).mouseleave(function () {
              $('.tooltip').hide();
          })
      }
  tool_tip();
  </code></pre>