我有以下 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 之后的工具提示”的文本
圖片
非常感謝
uj5u.com熱心網友回復：
如何使 Bootstrap 圖示工具提示與懸停和焦點一起使用
要使圖示正常作業，您需要使用可以接收焦點的標簽。一種方法是用標簽替換<i>標簽<span contenteditable>。該圖示將顯示相同，但??它現在可以同時使用懸停和焦點。查看代碼片段以查看它的作業原理。
如果我理解正確，您的第二個問題詢問如何在懸停時隱藏工具提示。這可以通過簡單地將觸發器屬性設定為僅聚焦來完成：data-bs-trigger="focus". 請參閱片段中的示例。
var tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});<h6>Bootstrap Icon Tooltip Example</h6>
<span contenteditable 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 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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />轉載請註明出處，本文鏈接：https://www.uj5u.com/net/450778.html
下一篇：禁用引導程式5回應式字體大小？