在页面加载时一次性显示引导工具提示并在 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);