在初始化时显示Twitter Bootstrap工具提示 [英] Show Twitter Bootstrap Tooltip on Initialize

问题描述

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

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.

您可以在以下网站上查看该行为: http://rework.herokuapp.com/organizations，在工作原理"部分.

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

这是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在工作原理"部分.

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

推荐答案

您可以执行以下操作:

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

演示: http://jsfiddle.net/AtvBN/9/​​ (用于页面的不同部分，但概念相同).

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

这篇关于在初始化时显示Twitter Bootstrap工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！