CODEWITHSUNDEEP
javascriptjquery
Ryan Oh
Ryan Oh

Reputation: 657

Show Bootstrap tool-tip one-time on page load and hide after x seconds?

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 :)

Upvotes: 1

Views: 1597

Answers (2)

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 1

Bar Levin
Bar Levin

Reputation: 215

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);

Upvotes: 0

Related Questions