Bootstrap工具提示沒有顯示在按鈕上的第一次鼠標懸停操作

我有一個基本的回到頂部Bootstrap按鈕，除了（Bootstrap）工具提示只顯示在第二次鼠標懸停操作，任何想法這是行不通的在第一隻鼠標懸停？Bootstrap工具提示沒有顯示在按鈕上的第一次鼠標懸停操作

HTML端：

<body> 
[...] 
<a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-trigger="hover" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a> 
[...] 
</body> 
</html>

JavaScript端：

<script> 
    function fadeInBody() { 
     $('body').fadeIn(500); 
    } 

    $(document).ready(function() { 
     fadeInBody(); 

     $(window).scroll(function() { 
      if ($(this).scrollTop() > 5) { 
       $('#back-to-top').fadeIn(); 
      } else { 
       $('#back-to-top').fadeOut(); 
      } 
     }); 

     $('#back-to-top').click(function() { 
      $('#back-to-top').tooltip('hide'); 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800); 
      return false; 
     }); 

     $('#back-to-top').tooltip('show'); 
     $('[data-toggle="tooltip"]').tooltip(); 
    }); 
</script>

來源

2017-10-10 Youna

可以嘗試使用'數據標題'而不是'數據切換'。 – numbtongue

我在jsFiddle上試過你的代碼，它工作。我的假設是你缺少一些導入或你的腳本稍後加載。請張貼你的entier頁面來驗證;） –

@MohamedBathaoui感謝聽起來像最有可能的加載順序問題，我要檢查了這一點。 – Youna

我設法在我身邊重現了這個問題。

我認爲根本問題是關係到你的jQuery準備的事件處理程序，你其實並不需要調用$('#back-to-top').tooltip('show');：

<script> 
    function fadeInBody() { 
     $('body').fadeIn(500); 
    } 

    $(document).ready(function() { 
     fadeInBody(); 

     $(window).scroll(function() { 
      if ($(this).scrollTop() > 5) { 
       $('#back-to-top').fadeIn(); 
      } else { 
       $('#back-to-top').fadeOut(); 
      } 
     }); 

     $('#back-to-top').click(function() { 
      $('#back-to-top').tooltip('hide'); 
      $('body,html').animate({ 
       scrollTop: 0 
      }, 800); 
      return false; 
     }); 

     // Try to comment this out below 
     // $('#back-to-top').tooltip('show'); 
     $('[data-toggle="tooltip"]').tooltip(); 
    }); 
</script>

讓我知道，如果你仍然面臨的問題。

來源

2017-10-10 16:34:30 Ehouarn

非常感謝你，它完全按照預期工作！ – Youna

既然你只共享這使得它更難調試的子元素，但我通常把data-tooltip包含父元素<a>標籤。我也從來沒有使用data-trigger參數，但它似乎並沒有創造你所說的小故障。

您的腳本是否加載在<body>標記的末尾？

希望這會有所幫助！

來源

2017-10-10 15:44:07

以及數據觸發器是一個更絕望的嘗試有無行爲是相同的。我打算再調查一下加載順序。 – Youna

Bootstrap工具提示沒有顯示在按鈕上的第一次鼠標懸停操作

回答

相關問題