bootstrap abbr[title] 带有工具提示的删除了虚线下划线样式,

voase2hg 于 4个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(102)

前提条件

我有一个用于重复或已关闭问题的 searched
我有一个任何HTML以避免常见问题
我阅读了 contributing guidelines

描述问题

我在文本中使用了一个 <abbr title="...">...</abbr> 缩写。
这很好，因为它为 YTD 和其他不是每个人都知道的术语提供了上下文。
现在，由于在2023年，每种超过10毫秒的人机交互都是有问题的，而且浏览器通常需要1000毫秒才能显示这个缩写文本，我正在使用BS工具提示来显示这个缩写。
在这个场景中，工具提示会在鼠标悬停时正确显示。但是现在它隐藏了使此功能可发现的虚线下划线样式。
预期：

实际：

简化的测试用例

请尝试原样操作，然后在底部注解掉 script 时进行测试。
重现： 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>

您在哪个操作系统上看到问题？

macOS

您在哪个浏览器上看到问题？

Chrome

您使用的Bootstrap版本是什么？

5.3.0

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/39026

1条答案

按热度按时间

w1e3prcc1#

这是一个有趣的用例。
实际上，Bootstrap Tooltip JS 会使用 title 并将其替换为 data-bs-original-title,因此虚线默认的浏览器渲染将被破坏，因为我猜想 <abbr> 使用 title 来实现虚线渲染。甚至可访问性也可能会被破坏，因为 <abbr> 的标题会被屏幕阅读器读取。
我还没有进行任何测试，但你可以尝试在这段时间内(即使你可能同时拥有两个工具提示：浏览器 + 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>

赞(0）回复(0）举报 4个月前

我来回答