在頁面加載時一次性顯示引導工具提示並在 x 秒后隱藏？

Question

因此，我嘗試向頁面中的特定元素添加工具提示形警報，該元素僅出現一次。 因此，如果用戶，例如單擊警報上的“X”，它現在將再次顯示。 下面是我嘗試添加警報的元素。

<div class="name-wrapper">
    <span class="usermain-name">     
        User name
    </span>
</div>

因此，如果用戶進入包含此元素的頁面，我希望在User name正上方出現一個工具提示，上面寫着“單擊此處編輯您的姓名”。 如上所述，它只能出現一次。 我是前端的新手，不知道如何創建它。 如果它提供任何其他信息，我正在使用 Bootstrap。

我非常感謝您的幫助:)

Answer 1

您可以使用jQuery和引導tooltip函數在引導程序 4 中輕松完成此操作。

在username元素中使用data-toggle="tooltip " data-placement="top"

工具提示將在頁面加載時出現，並在 3 秒后消失。

運行下面的代碼片段。

 //Show tooltip on page load $('span').tooltip('show'); //Hide tooltip after three seconds setTimeout(function(){ $('span').tooltip('dispose') }, 3000)

 <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <.-- Popper JS --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16:0/umd/popper.min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <div class="name-wrapper"> <span class="usermain-name" data-toggle="tooltip" data-placement="top" title="I will appear only once"> User name </span> </div>

Answer 2

您可以使用 jQuery 做到這一點：

Html：

<a href="#"title="Download Excel" class="tool_tip">Download Excel</a>

jQuery：

$('.tool_tip')
.attr('data-toggle', 'tooltip')
.attr('data-placement', 'right')
.tooltip({
    trigger: 'manual'
  })
  .tooltip('show')


  setTimeout(function(){
    $('.tool_tip').tooltip('hide') // it will be disappeared after 5 seconds
  }, 5000);