Показывать Bootstrap подсказку один раз при загрузке страницы и скрывать через x секунд?

Question

Итак, я пытаюсь добавить предупреждение в виде всплывающей подсказки к определенному элементу c на моей странице, которое появляется только один раз. Поэтому, если пользователь, например, нажимает «X» на предупреждении, теперь оно будет отображаться снова. Ниже приведен элемент, к которому я пытаюсь добавить предупреждение.

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

Итак, если пользователь переходит на страницу с этим элементом, я хочу, чтобы всплывающая подсказка появлялась прямо над User name, с надписью «нажмите здесь, чтобы изменить свое имя». И, как было сказано выше, он должен появиться только один раз. Я новичок ie в интерфейсе и понятия не имею, как это создать. Я использую Bootstrap, если он дает дополнительную информацию.

Я очень ценю вашу помощь :)

Answer 1

Вы можете легко сделать это в bootstrap 4, используя функции jQuery и bootstrap tooltip.

Используя data-toggle="tooltip "data-placement="top" в вашем username элементе

Всплывающая подсказка появится при загрузке страницы и исчезнет через 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);