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

I have the following HTML, it is working as expected (when hovering to the "!" symbol, the tooltip appears), however as because one of them have the link inside the tooltip, I would like it to act like "focus" and also "hover" at the same time, thus when I hover the tooltip with link inside it, it still act like "hover" (the tooltip disappear when I am not hovering the HTML, but when I click on the HTML, it will act like "focus" which the tooltip still appears and will disappear when I am click outside of the HTML)

How can I achieve it for "focus" and also "hover"?

Here is the code that I am using:

HTML Code

<i  data-bs-toggle="tooltip" title="This is a tooltip with no HTML"></i>
<i  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 Code

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

and also, if I am hovering to the tooltip, I still can see "This is a tooltip after HTML" in the background like the following image, how can I make the tooltip background is solid? So that the text of "This is a tooltip after HTML" not appear when I am hovering the tooltip

Image

Thank you very much

CodePudding user response：

How to make a Bootstrap icon tooltip work with hover and focus

To make the icon work, you will need to use a tag that can receive the focus. One way to do this is to replace the <i> tag with a <span contenteditable> tag. The icon will display the same, but it will now work with both hover and focus. View the code snippet to see it working.

Your second question, if I understood correctly, asks how to hide the tooltip on hover. That can be done by simply setting the trigger attribute to focus only: data-bs-trigger="focus". See the example in the snippet.

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