abbr[title] with tooltip is deleting dotted underline styling #39026
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
I use a <abbr title="...">...</abbr> abbreviation in text.
This is good because it provides context for YTD and other terms that not everybody knows.
Now, because in 2023 every human-computer interaction that takes more than 10ms is broken, and because browsers typically take 1,000ms to show that abbreviation title, I use BS tooltips to show this abbreviation.
In this scenario, the tooltip will properly show on mouse-over. But now it is hiding the dotted underline styling that makes this feature discoverable.
Expected:
Actual:
Reduced test cases
Please try this as-is, and then when commenting out the script at bottom.
Repro: https://stackblitz.com/edit/github-rpfnqj-hsmnpo?file=index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"
></script>
</head>
<body>
<abbr title="Bootstrap">BS</abbr> is awesome
<script>
// Activate BS5 tooltips everywhere
[].slice
.call(document.querySelectorAll('[title]'))
.forEach((el) => new bootstrap.Tooltip(el));
</script>
</body>
</html>What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3.0