Show Twitter Bootstrap Tooltip on Initialize

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".

回答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).

回答2:

".in" class is responsible for showing tooltip title. if you want to

Display all tooltip when user first hits page.

then you can simply add class in to all your tooltip elements. Like this:

$('#step1').tooltip('show');//Initialize tooltip in any way you desire
$('[data-toggle="tooltip"]').find(".tooltip.fade").addClass("in");

in case you want to

Remove all default showing tooltip when user first hits page and set tooltip default behavior.

You can also do like this

$('#step1').tooltip('show');//Initialize tooltip in any way you desire
$('[data-toggle="tooltip"]').find(".tooltip.fade").removeClass("in");

This way it's working for me, hope it'll also work for you.