Question

I basically want to display a tooltip when someone first reaches the page, but then after they hover over it (or other tooltips on the page), it goes back to its default hover behavior. There seems to be a bug when this happens which doesn’t work out well. Currently I load the tooltip using the $(‘div#id’).tooltip(‘show’) command, but I can’t seem to figure out how to revert it back to its default hover behavior. Worse yet, if I write a hover function for the specific div to switch between “show” and “hide” it is buggy.

You can see the behavior on this website: http://rework.herokuapp.com/organizations, under the section ‘how it works’.

Here is the HTML code:

<div class="row center works">

   <div class="of center"><img alt="Step 1" class="center step init" data-placement="bottom" id="step1" rel="tooltip" src="/assets/works/step1.png" data-original-title="People who are driven to find meaningful work apply to the ReWork Talent Pool."></div>

   <div class="of center"><img alt="Step 2" class="center step" data-placement="bottom" id="step2" rel="tooltip" src="/assets/works/step2.png" data-original-title="ReWork screens applicants for skills, experience, values, and accomplishments."></div>

   <div class="of center"><img alt="Step 3" class="center step" data-placement="bottom" id="step3" rel="tooltip" src="/assets/works/step3.png" data-original-title="You engage ReWork for a role you need filled, and ReWork hand-selects qualified candidates from the talent pool."></div>

   <div class="of center"><img alt="Step 4" class="center step" data-placement="bottom" id="step4" rel="tooltip" src="/assets/works/step4.png" data-original-title="You choose which candidates you want to meet, and make an offer if there’s a good fit."></div>

   <div class="of center"><img alt="Step 5" class="center step" data-placement="bottom" id="step5" rel="tooltip" src="/assets/works/step5.png" style="padding-bottom:13px" data-original-title="ReWork collects a fee when a successful hire is made."></div>

</div>

jQuery:

    $('img#step1').load(function(){
      $('#step1').tooltip('show');
    });

    $('.step').hover(function() {
        $('#step1').removeClass('init');
        if ($(this).attr('id') != 'step1') {
            $('#step1').tooltip('hide');
        } else {
            $('#step1').tooltip('show');
        }

The bug is again visible on the website: http://rework.herokuapp.com/organizations under the section “how it works”.

Answer 1

You could do something like this:

$('.works .step').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
  $(this).tooltip('enable');
});​​​​​​​

Demo: http://jsfiddle.net/AtvBN/9/ (it’s for a different part of the page, but the concept is identical).