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

user_7121912 0
Viewed 494

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 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 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 Text of "This is a tooltip after HTML" still visible when hovering to the tooltip

Thank you very much

font-awesome twitter-bootstrap blazor asp.net-core
1 Answers

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.

Update

From comments, the second question asks how to change the tooltip background color opacity. The default is 0.9, which allows text under the tooltip to remain slightly visible. For Bootstrap versions 4 & 5, the following css sets the background to solid. For earlier Bootstrap versions, see this related SO question.

Update 2

The original solution added the contenteditable attribute to allow focus on the element. However, a side effect of that is that it also allows the user to enter text. To allow focus, but disable user input, we need to add event.preventDefault() to the keypress and paste events. We can also hide the blinking text caret with css as shown:

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

Complete working code snippet

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

user_9434350
Related