顯示Twitter的引導工具提示上初始化

我基本上要當有人首先到達頁面來顯示一個提示，但隨後後，他們將鼠標懸停在它（或頁面上的其他工具提示），它可以追溯到其默認懸停行爲。發生這種情況時似乎有一個錯誤，這種情況不能很好地發揮作用。目前我加載使用$（「＃DIV ID」）的提示。提示（「秀」）的命令，但我似乎無法弄清楚如何將其恢復到默認懸停行爲。更糟糕的是，如果我爲特定的div編寫懸停功能以在「顯示」和「隱藏」之間切換，那麼它就很麻煩。顯示Twitter的引導工具提示上初始化

你可以看到這個網站上的行爲：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'); 
     }

bug是在網站上再次可見：http://rework.herokuapp.com/organizations下的部分「它是如何工作」。

來源

2012-09-13 krnjn

你可以做這樣的事情：

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

演示：http://jsfiddle.net/AtvBN/9/（這是爲頁面的不同部分，但概念是相同的）。

來源

2012-09-13 17:23:54 Blender

不應該提示消失，當你將鼠標懸停在其他工具提示還是我誤解了問題？ – Narretz

@Narretz那是對的。即使將鼠標懸停在另一個上，我也希望工具提示消失。如果您首先將鼠標懸停在初始工具提示上，此解決方案纔有效。 – krnjn

是這樣的嗎？ http://jsfiddle.net/AtvBN/11/ – Blender

「在」類負責顯示工具提示標題。如果你想

當用戶第一次打到頁面時顯示所有工具提示。

然後您可以簡單地將類添加到所有工具提示元素中。像這樣：

$('#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-28 06:58:16

請添加一些解釋，而不是隻是代碼... – eirikir

顯示Twitter的引導工具提示上初始化

回答

相關問題