Bootstrap 工具提示 HTML，在 上带有很棒的字体图标锚标记在焦点上不起作用

Question

我有以下 HTML，它按预期工作（当悬停到“！”符号时，会出现工具提示），但是因为其中一个在工具提示内有链接，所以我希望它的行为像“焦点”并且同时也“悬停”，因此当我悬停带有链接的工具提示时，它仍然像“悬停”一样（当我没有悬停 HTML 时工具提示消失，但是当我单击 HTML 时，它会起作用就像“焦点”一样，工具提示仍然如此当我在 HTML 之外单击时出现并消失）

如何实现“焦点”和“悬停”？

这是我正在使用的代码：

HTML 代码

<i class="fa-solid fa-circle-exclamation" data-bs-toggle="tooltip" title="This is a tooltip with no HTML"></i>
<i class="fa-solid fa-circle-exclamation" data-bs-toggle="tooltip" data-bs-html="true" data-bs-trigger="hover focus" title="This is a tooltip with <a href='#'>HTML</a>"></i>
This is a tooltip after HTML

JavaScript 代码

var tooltipTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

而且，如果我将鼠标悬停在工具提示上，我仍然可以看到“这是 HTML 之后的工具提示”在如下图所示的背景中，如何使工具提示背景为纯色？ 上时，不会出现“这是 HTML 之后的工具提示”文本

这样当我将鼠标悬停在工具提示图像

非常感谢

Answer 1

如何使 Bootstrap 图标工具提示与悬停和焦点配合使用

要使图标发挥作用，您需要使用可以接收焦点的标签。实现此目的的一种方法是将 标记替换为 标记。图标将显示相同的内容，但现在它可以在悬停和焦点下使用。查看代码片段以查看其工作原理。

如果我理解正确的话，你的第二个问题是问如何在悬停时隐藏工具提示。只需将触发器属性设置为仅聚焦即可完成此操作：data-bs-trigger="focus"。请参阅代码片段中的示例。

更新

从评论中，第二个问题询问如何更改工具提示背景颜色不透明度。默认值为 0.9，允许工具提示下的文本保持轻微可见。对于 Bootstrap 版本 4 和5、下面的css将背景设置为纯色。对于早期的 Bootstrap 版本，请参阅此相关 SO 问题。

更新 2

原始解决方案添加了 contenteditable 属性以允许将焦点放在元素上。然而，它的副作用是它还允许用户输入文本。为了允许焦点，但禁用用户输入，我们需要将 event.preventDefault() 添加到按键和粘贴事件。我们还可以使用 css 隐藏闪烁的文本插入符号，如下所示：

<span contenteditable onkeypress="event.preventDefault()" onpaste="event.preventDefault()" style="caret-color: transparent;" ...etc

完整的工作代码片段

<style>
    .tooltip-inner { 
       opacity: 1 !important; 
       filter: alpha(opacity=100);
    }
</style>

var tooltipTriggerList = [].slice.call(
  document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

.tooltip-inner { 
  opacity: 1 !important; 
  filter: alpha(opacity=100);
}

<h6>Bootstrap Icon Tooltip Example</h6>


<span contenteditableonkeypress="event.preventDefault()" onpaste="event.preventDefault()" style="caret-color: transparent;" class="fa-solid fa-circle-exclamation mt-4" data-bs-toggle="tooltip" data-bs-html="true" data-bs-trigger="hover focus" title="This is a tooltip with <a href='#'>HTML</a>"></span>
This tooltip uses focus and hover. Hover and then click the icon.

<br/>

<span contenteditable onkeypress="event.preventDefault()" onpaste="event.preventDefault()" style="caret-color: transparent;" class="fa-solid fa-circle-exclamation mt-4" data-bs-toggle="tooltip" data-bs-html="true" data-bs-trigger="focus" title="This is a tooltip with <a href='#'>HTML</a>"></span>
This tooltip uses focus only. You must click the icon to view the tooltip.

<style>
  /* optitonal - removes focus border outline */
  span.fa-solid { outline: none; }
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />

<!-- Bootstrap 4 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
-->

<!-- Bootstap 5 -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>



<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />