jqueryhtmljquery-toolsjquery-tooltip

Making jQuery tooltip appear when hovering over a div

I am struggling to get tooltips to work when I hover over a div. Here is the HTML markup:

<div class="booking_step_wrap">
    <h4>Email</h4>
    <div class="booking_step" title="hello"><i class="icon-laptop"></i></div>
 </div>

and for the jQuery I have:

jQuery(function() {
  jQuery(".booking_step [title]").tooltip();
});

and CSS (taken from jQuery tools site):

.tooltip {
display:none;
background:black;
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#eee;

}

Currently, nothing happens when I hover over that div, and I can't see why. Here 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.

Solution

  • Because you have a typo.

    Try without space between class and attribute check

    $(function() {
  jQuery(".booking_step[title]").tooltip();
});

    Or simply 

    $(function() {
    $( document ).tooltip();
});

    DEMO