引导工具提示不应隐藏或消失在专注于工具提示内容

Posted 2023-05-08

【中文标题】引导工具提示不应隐藏或消失在专注于工具提示内容

【英文标题】：Bootstrap Tooltip should not hide or disapperar on focusing on tooltip content

【发布时间】：2021-11-03 07:01:06

【问题描述】：

我已经在我的项目中实现了引导工具提示。我只想在用户只关注外部时隐藏或消失工具提示。当用户关注工具提示内容时，它不应该隐藏或消失，但它正在隐藏，谁能告诉当用户关注外部时如何隐藏或消失工具提示内容？

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