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

Question

So I'm trying to add a tooltip-shaped alert to a specific element in my page, which appears only once. So if the user, for example clicks 'X' on the alert, it will now show again. Below is the element that I'm trying to add the alert to.

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

So if the user enters the page that has this element, I want to have a tooltip appear right above the User name , that says "click here to edit your name". And as mentioned above, it has to appear only once. I'm a newbie in front-end and have no idea on how to create this. I'm using Bootstrap, if it provides any additional information.

I very much appreciate your help:)

Answer 1

You can do this easily in bootstrap 4 by using jQuery and bootstrap tooltip functions.

Using data-toggle="tooltip " data-placement="top" in your username element

The tool tip will appear on page loads and will disappear after 3 seconds.

Run Snippet below.

 //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

You can do it with 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);