Does anybody know how to remove the line between the arrow and the body for Bootstrap 5 popovers? I've tried a hundred things and nothing seems to work. See the image below for what I mean.
https://jsfiddle.net/ajster/4tyw0xn5/7/
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<a href="#" class="ms-5" style="font-size: .85rem; text-decoration: none; color: black;" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-html="true" data-bs-content="This is an example popover. I don't want to see the line between the arrow and the content box for a clean look.">[Click for Popover example]</a>