title: Making jQuery tooltip appear when hovering over a div
body: <p>I am struggling to get tooltips to work when I hover over a div. Here is the HTML markup:</p>
  
  <pre><code>&lt;div class="booking_step_wrap"&gt;
      &lt;h4&gt;Email&lt;/h4&gt;
      &lt;div class="booking_step" title="hello"&gt;&lt;i class="icon-laptop"&gt;&lt;/i&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and for the jQuery I have:</p>
  
  <pre><code>jQuery(function() {
    jQuery(".booking_step [title]").tooltip();
  });
  </code></pre>
  
  <p>and CSS (taken from jQuery tools site):</p>
  
  <pre><code>.tooltip {
  display:none;
  background:black;
  font-size:12px;
  height:70px;
  width:160px;
  padding:25px;
  color:#eee;
  </code></pre>
  
  <p>}</p>
  
  <p>Currently, nothing happens when I hover over that div, and I can't see why.
  <a href="http://www.thedistractionsband.co.uk" rel="nofollow">Here</a> is the website in question. The div in question is at the bottom in the contact section (first circle with a laptop icon in it). Any advice would be welcome.</p>