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

Question

我有以下 HTML，它按预期工作（当悬停到“！”符号时，工具提示出现），但是因为其中一个在工具提示，我希望它同时表现得像“焦点”和“悬停”，因此当我将工具提示悬停在其中 link 时，它仍然表现得像“悬停”（工具提示消失时我我没有悬停在 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 图标工具提示与悬停和焦点一起工作

要使图标正常工作，您需要使用可以接收焦点的标签。一种方法是用 <span contenteditable> 标签替换 <i> 标签。该图标将显示相同，但它现在可以同时使用悬停和焦点。查看代码片段以查看它是否正常工作。

你的第二个问题，如果我没理解错的话，问的是如何在悬停时隐藏工具提示。这可以通过简单地将触发器属性设置为仅聚焦来完成：data-bs-trigger="focus"。请参阅代码段中的示例。

更新

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

更新 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/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
-->

<!-- Bootstap 5 -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

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

Bootstrap tooltip HTML with font awesome icons on <i> anchor tag not working on focus

twitter-bootstrap

asp.net-core

blazor

font-awesome