Skip to content

abbr[title] with tooltip is deleting dotted underline styling #39026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
3 tasks done
fulldecent opened this issue Aug 9, 2023 · 3 comments · May be fixed by #41421
Open
3 tasks done

abbr[title] with tooltip is deleting dotted underline styling #39026

fulldecent opened this issue Aug 9, 2023 · 3 comments · May be fixed by #41421
Labels
js v5

Comments

@fulldecent
Copy link
Contributor

fulldecent commented Aug 9, 2023 •
edited
Loading

Prerequisites

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:
Screenshot 2023-08-09 at 11 46 06

Actual:
Screenshot 2023-08-09 at 11 46 15

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/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/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
@julien-deramond
Copy link
Member

This is an interesting use case.

Indeed, Bootstrap Tooltip JS will use title and replace it with data-bs-original-title, and so the dotted default browser rendering will be broken because I suppose that <abbr> uses title to make the dotted rendering. Even the accessibility will be probably broken because the title of an <abbr> is read by screen readers.

Haven't tested it at all but you could maybe try something like this (kinda ugly) in the meantime (even if you'll probably have both tooltips: browser + Bootstrap):

<abbr title="Bootstrap"><span title="Bootstrap">BS</span></abbr> is awesome
<script>
  // Activate BS5 tooltips everywhere
  [].slice
    .call(document.querySelectorAll('[title]'))
    .forEach((el) => new bootstrap.Tooltip(el.querySelector('span')));
</script>

@fulldecent
Copy link
Contributor Author

The workaround it to add this style:

abbr[data-bs-original-title] {
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}

fulldecent added a commit to fulldecent/bootstrap that referenced this issue Apr 29, 2025
@fulldecent
Allow abbr styling with tooltip, fixes twbs#39026
5eeceeb
@fulldecent fulldecent linked a pull request Apr 29, 2025 that will close this issue
Open
10 tasks
@fulldecent
Copy link
Contributor Author

Added PR at #41421

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
js v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow abbr styling with tooltip, fixes #39026 fulldecent/bootstrap
2 participants
@fulldecent @julien-deramond