Javascript 在页面加载时一次性显示引导工具提示，并在x秒后隐藏？

因此，我试图在我的页面中的特定元素中添加一个工具提示形状的警告，它只出现一次。因此，如果用户（例如）单击警报上的“X”，它现在将再次显示。下面是我试图添加警报的元素

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

用户名

---

因此，如果用户进入包含此元素的页面，我希望在

用户名

的正上方显示一个工具提示，上面写着“单击此处编辑您的姓名”。如上所述，它只能出现一次。我是前端的新手，不知道如何创建这个。我正在使用引导，如果它提供任何附加信息的话

我非常感谢您的帮助：）

您可以使用jQuery：

Html:

---

通过使用

jQuery

和bootstrap

tooltip

函数，您可以在bootstrap4中轻松做到这一点

在

username

元素中使用

data toggle=“tooltip

”

data placement=“top”

工具提示将出现在页面加载上，并在3秒钟后消失

运行下面的代码段

//在页面加载时显示工具提示
$（'span'）。工具提示（'show'）；
//三秒钟后隐藏工具提示
setTimeout（函数（）{
$（'span'）。工具提示（'dispose'））
}，3000）

用户名

您使用哪个版本的引导？您是否使用jQuery？您可以为此使用页内加载函数。您可以使用一次选项启动单击事件侦听器，它将只执行一次。@refatalsakka I“我正在使用引导程序4:）@NitishPhanse除了单击之外，还有其他事件侦听器吗？因为我想在页面加载后立即显示警报非常感谢您的回答。但只有一件事：有没有办法让它只出现一次？用户只需检查一次警报，以后再也不必检查。我必须使用cookie吗？@RyanOh是的，那样的话，你必须使用cookie。但理想情况下，最佳实践和更好的用户体验是在用户每次访问页面时加载工具提示。这取决于什么对你最好，范围是什么。谢谢：）

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

$('.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);