1

我基本上想在有人第一次到达页面时显示一个工具提示，但是在他们将鼠标悬停在它上面（或页面上的其他工具提示）之后，它又回到了默认的悬停行为。发生这种情况时似乎有一个错误，效果不佳。目前我使用 $('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在“如何工作”部分下。

4

2 回答 2

7

你可以这样做：

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

演示： http: //jsfiddle.net/AtvBN/9/（用于页面的不同部分，但概念相同）。

于 2012-09-13T17:23:54.283 回答
0

“.in”类负责显示工具提示标题。如果你想

当用户第一次点击页面时显示所有工具提示。

然后您可以简单地将类添加到所有工具提示元素中。像这样：

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

如果你想

当用户第一次点击页面并设置工具提示默认行为时，删除所有默认显示工具提示。

你也可以这样做

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

这样它对我有用，希望它也对你有用。

于 2015-09-28T06:58:16.047 回答