Enabling tooltips for SVGs causes borders to show up when clicked

Bug Reports
1

Hello,

I’m using SVGs. If I enable tooltips for the SVG and click on it, then solid black borders with round corners around the SVG show up. I’m using Bootstrap v5.3, and BSS v6.4.3

Screen shot:
image

Html export of the example bsdesign file:

<!DOCTYPE html>
<html data-bs-theme="light" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>SVG tooltip issue replication</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
</head>

<body>
    <div class="d-block" style="position: absolute; margin-left:50%; margin-top:300px;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-zoom-in" data-bs-toggle="tooltip" data-bss-tooltip="" title="Test 1 2 3">
            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"></path>
            <path d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"></path>
            <path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"></path>
        </svg></div>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/script.min.js"></script>
</body>

</html>

script.min.js (this is auto generated by BSS);

document.addEventListener("DOMContentLoaded",(function(){[].slice.call(document.querySelectorAll("[data-bss-tooltip]")).map((function(t){return new bootstrap.Tooltip(t)}))}),!1);

This doesn’t happen for the example show in Tooltips · Bootstrap v5.3. But there, tooltip is added to the parent element not the SVG itself. Therefore I don’t know if I’m doing something I’m not supposed to do (i.e. enabling tooltips for SVG elements). I’m not an expert in anything (HTML, CSS, Javascript), so I’m not sure if this is a bug in BSS or Bootstrap itself or a design feature :upside_down_face:

Any clarification would be appreciated.

1 Like
2

Thank you for providing your code and screenshot! This is the standard browser focus outline. You can remove it with the following CSS:

svg:focus {
  outline: none;
}
2 Likes