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/ （它适用于页面的其他部分，但概念完全相同）。

Answer 2

“。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");

这种方式对我有用，希望它对你也有用。

在Initialize上显示Twitter Bootstrap工具提示

2 个答案: