Suppress Bootstrap Dismissable Popover Border Highlighting

Question

When clicking on a link (or button) to display a dismissible popover, the border of the clicked element is highlighted. This occurs with the example from the Bootstrap documentation and my page in practice. (FYI, I plan to replace my text "[ i ]" with an image; my assumption is that the highlighted element is the href and not the text.)

Bootstrap 5 Docs Dismissible Popover Button

My DismissIble Popover

In the Bootstrap Docs example, the following is added to the element when the button is clicked:

aria-describedby="popover808202"

My Code

<div class="tile-title">
  Modified<span style="float:right;"><a tabindex="0" href="#" title="Help" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Descriptive and useful information can be displayed here.">[ i ]</a></span>
</div>

My JavaScript

let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
let popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Desired Result

I would like to suppress the highlighting.

Answer 1

Turns out this was easier than I thought.

a:focus {
  outline: none;
  border-color: rgba(0,0,0,0);
  box-shadow: none;
}

This example will of course disable anchor highlighting completely (for all anchors that use the CSS properties above) for the entire page.