Tooltips and Accessibility #41911

jenstroeger · 2025-12-09T07:02:26Z

jenstroeger
Dec 9, 2025

I wanted to follow up on issue #39945 and my comment there.

It seems to me that setting title="" for an element with tooltip is intended to prevent the BS tooltip from colliding with the browser’s default tooltip for that same element. However, that "" makes the title text unavailable for ATs to announce the element.

A solution to that seems to be the use of the aria-description attribute, but that’s not documented for v4.6 or v5.1. For testing purposes with ATs I used this test file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test Links</title>
    <link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  </head>
  <body>

    <p>A link: <a href="http://google.com/" title="Link to the Google search engine">Google</a></p>
    <p>A link with Tooltip: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip">Google</a></p>
    <p>A link with Tooltip und ARIA 1: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-description="Link to the Google search engine">Google</a></p>
    <p>A link with Tooltip und ARIA 2: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-describedby="#descr">Google</a></p>
    <p>A link with Tooltip und ARIA 3: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-label="Link to the Google search engine">Google</a></p>
    <p>A link with Tooltip und ARIA 4: <a href="http://google.com/" title="Link to the Google search engine" data-tooltip="tooltip" aria-labelledby="#descr">Google</a></p>

    <div class="d-none">
      <p id="descr">Link to the Google search engine</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <script>
      $(function() {
        $("[data-tooltip='tooltip']").tooltip();
      });
    </script>
  </body>
</html>

Interestingly, Aria 1 and 3 are announced by an AT (I think it’s JAWS) and 2 and 4 are not (maybe because #desc is isn’t displayed).

Now I’m curious about the community’s suggestions… 🤓

Addendum see also ARIA: tooltip role on MDN.

easonw1207 · 2025-12-13T20:21:34Z

easonw1207
Dec 13, 2025

https://www.google.com/?safe=active&ssui=on

3 replies

jenstroeger Dec 14, 2025
Author

I’m not sure what this link tells me: the referenced Google page does not use/show tooltips and uses the aria-label attribute only, and just on some elements. My question, though, is primarily concerned with showing tooltips on elements…

easonw1207 Dec 19, 2025

this is for unblock Google on Chromebook for students this is just the most accessible link

jenstroeger Dec 19, 2025
Author

I still do not understand how that answers my question and concern?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Tooltips and Accessibility #41911

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Bootstrap

Tooltips and Accessibility #41911

Uh oh!

Uh oh!

jenstroeger Dec 9, 2025

Replies: 1 comment · 3 replies

Uh oh!

easonw1207 Dec 13, 2025

Uh oh!

jenstroeger Dec 14, 2025 Author

Uh oh!

easonw1207 Dec 19, 2025

Uh oh!

jenstroeger Dec 19, 2025 Author

jenstroeger
Dec 9, 2025

Replies: 1 comment 3 replies

easonw1207
Dec 13, 2025

jenstroeger Dec 14, 2025
Author

jenstroeger Dec 19, 2025
Author