Блог

Главная - Вопросы по программированию - Всплывающая подсказка начальной загрузки не должна скрываться или разочаровывать при фокусировании на содержимом всплывающей подсказки

Всплывающая подсказка начальной загрузки не должна скрываться или разочаровывать при фокусировании на содержимом всплывающей подсказки

#jquery #css #twitter-bootstrap #bootstrap-4

Вопрос:

Я реализовал всплывающую подсказку начальной загрузки в своем проекте. Я хочу скрывать или исчезать всплывающую подсказку только тогда, когда пользователь фокусируется только снаружи . Когда пользователь фокусируется на содержимом всплывающей подсказки, оно не должно скрываться или исчезать, но оно скрывается, может ли кто-нибудь сказать, как скрыть или исчезнуть содержимое всплывающей подсказки, когда пользователь фокусируется снаружи ?

 <a href="#" data-toggle="tooltip" title="Some tooltip text!" data-placement="top">Hover over me</a>

$('[data-toggle="tooltip"]').tooltip({
container: 'body',
boundary: 'window',
trigger: 'focus hover',
html: true,
template:   
 '<div class="tooltip bs-tooltip-top" role="tooltip">' 
  '<div class="arrow"></div>' 
  '<div class="tooltip-inner">' 
  '</div>' 
'</div>'

Спасибо

Ответ №1:

Этот пример работает, если это то, что вы ищете.
Вот скрипка, если вам нравится немного поиграть: https://jsfiddle.net/bogatyr77/8Ln7z0te/4/

 $(function() {
  $('[data-toggle="popover"]').popover({
    trigger: 'hover focus',
    placement: 'bottom',
    content: "And here's some amazing content. It's very engaging. Right?",
    title: "Popover title",
    html: true,
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
  })
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover">Click to toggle popover</button>
Метки: