在Initialize上显示Twitter Bootstrap工具提示

Question

我基本上想要在有人第一次到达页面时显示工具提示,但是当他们将鼠标悬停在页面上(或页面上的其他工具提示)后,它会返回其默认的悬停行为.发生这种情况似乎有一个错误,但效果不佳.目前我使用$('div#id').tooltip('show')命令加载工具提示,但我似乎无法弄清楚如何将其恢复为默认的悬停行为.更糟糕的是,如果我为特定div编写悬停功能以在"显示"和"隐藏"之间切换,那么它就是错误的.

您可以在此网站上查看此行为:http://rework.herokuapp.com/organizations,在"如何运作"部分下.

这是HTML代码:

<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');
        }

该错误在网站上再次显示:http://rework.herokuapp.com/organizations在"它是如何工作"部分下.

Answer 1

你可以这样做:

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

演示:http://jsfiddle.net/AtvBN/9/(它适用于页面的不同部分,但概念完全相同).