禁用链接和 <abbr>s 上的浏览器工具提示答案

【问题标题】：Disabling browser tooltips on links and <abbr>s禁用链接和 <abbr>s 上的浏览器工具提示
【发布时间】：2009-01-19 11:47:22
【问题描述】：

当用户将鼠标悬停在某些链接和元素上时，我想禁止 Web 浏览器的默认工具提示显示。我知道这是可能的，但我不知道如何。有人可以帮忙吗？

这样做的原因是为了抑制微格式日期时间的工具提示。 BBC 放弃了对 hCalendar 的支持，因为机器可读日期的外观对于有认知障碍的人和一些屏幕阅读器用户来说是一个可访问性问题。 http://www.bbc.co.uk/blogs/bbcinternet/2008/07/why_the_bbc_removed_microforma.html

编辑：

我按照 Aron 的建议开发了一个 jquery 插件...

// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
    $(".dtstart,.dtend,.bday").hover(function(){
        $(this).attr("ufdata",$(this).attr("title"));
        $(this).removeAttr("title");
    },function(){
        $(this).attr("title",$(this).attr("ufdata"));
        $(this).removeAttr("ufdata");
    });
}
})(jQuery);

// Usage
$.ufsuppress();

【问题讨论】：

BBC 采取了正确的方法，title 属性是为了向用户提供信息，而不是存储 semweb 数据。我会跟随他们的领导，而不是试图通过使用 JS 从 DOM 中删除它来破解 HTML 中的 title 属性（这仍然会为许多人类用户保留信息）。
新的微格式“值类模式”提供了一种在不使用 abbr 元素的情况下发布日期的方法。有关微格式 wiki 的更多信息：microformats.org/wiki/value-class-pattern

标签： javascript jquery accessibility microformats

【解决方案1】：

据我所知，实际上不可能禁止显示标题标签。

但是有一些解决方法。

假设您的意思是要保留链接和元素上的 title 属性，您可以使用 Javascript 删除 onmouseover() 的 title 属性，然后在 onmouseout() 重新设置它。

// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
        links[i]._title = links[i].title;
        links[i].onmouseover = function() { 
            this.title = '';
        }
        links[i].onmouseout = function() { 
            this.title = this._title;
        }
    }
}

【讨论】：

很好，这比完全删除标题更可取，因为它们需要存在于用户脚本和像 Operator 这样的插件中。非常有用，谢谢。
我想实际上不可能抑制默认浏览器行为？这将是理想的，但我确实喜欢这个解决方案。
JavaScript-Memory-Consumption-Awareness-Day：不要在循环中使用函数字面量，尽可能将它们移出循环！
在微格式日期的情况下，标题属性是机器可读的内容，这意味着不幸的是它不太有用，甚至对某些屏幕阅读器用户来说是混乱的。
呵呵呵呵。 Christoph 经常提到这一点。我实际上已经改变了我的方式，谢谢克里斯托夫

【解决方案2】：

将此元素添加到您的 html 中

    onmouseover="title='';"

例如，我有一个 asp.net 复选框，我存储了一个隐藏变量，但不希望用户将其视为工具提示。

【讨论】：

【解决方案3】：

使用jQuery plugin timeago 时遇到此线程。实际上解决方案非常简单，使用 CSS 属性pointer-events。发布此内容是为了让通过搜索引擎来到这里的人们受益:)

.suppress {
    pointer-events:none;
}

请注意，您不应该将它用于应该点击到某物的链接之类的东西。在这种情况下，请使用公认的 JS 解决方案。

【讨论】：

【解决方案4】：

原型中的类似内容会将datetime microformats 的所有标题属性设为“dtstart”类：

$$('abbr.dtstart').each(function(abbr){abbr.title=' '})

注意我使用了一个空格，Mozilla 文档中的element.title 状态

根据bug 264001，设置空字符串的标题触发默认继承行为。取消继承，标题必须设置为非空空白字符串。

【讨论】：

感谢 Paul，我查看了这个选项，但理想情况下我们需要保留标题，以便其他脚本和插件仍然可以使用存储在 DOM 中的机器可读数据。

【解决方案5】：

这对您的问题没有帮助，但可能很有趣：除了title，还有另一个通用属性可用于存储数据 - lang！

只需将要存储的数据转换为连续字符串，并在其前面加上'x-' 前缀，即可根据 RFC 1766 声明私有使用。

在 cmets 中，sanchothefat 澄清说他想用微格式中的 abbr-design-pattern 解决可用性问题。但是还有其他模式在语义上比这个模式更有意义（或者，在我看来更是如此）。我会做什么：

<p>
 The party is at
  <dfn class="micro-date">10 o'clock on the 10th
   <var>20051010T10:10:10-010</var></dfn>.
</p>

结合这些风格

dfn.micro-date {
    font-weight: inherit;
    font-style: inherit;
}
dfn.micro-date var {
    display: none;
}

在我看来，语义上最正确的方法是使用dl 定义列表——这在段落中是不允许的。这可以通过以下模式解决：

<p>
 The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>

<dl id="micro-dates">
 <dt>10 o'clock on the 10th</dt>
 <dd>20051010T10:10:10-010</dd>
</dl>

这需要更复杂的样式表：

q[cite='#micro-dates']:before {
    content: '';
}
q[cite='#micro-dates']:after {
    content: '';
}
dl#micro-dates {
    display: none;
}

【讨论】：

我试图（在某种程度上）解决的问题是微格式中的 abbr-design-pattern 持续存在的问题。他们选择使用语义上最正确的可用标记和使用“标题”属性的日期缩写的目标之一。不幸的是，存在可访问性问题
那里很有趣，值得深思，我可能有点草率地选择了答案...
您想将此建议发布到 uF-discuss 邮件列表/IRC 还是我应该？
请随意使用这些建议 - 我已经在 #microformats for cmets 上询问过 - 其中包括尝试合并某种形式的包含模式以支持现有工具的建议
PS：如果您真的在邮件列表中发布消息，如果您能添加另一条评论，我将不胜感激 - 我没有关注此列表，但我至少会检查档案看看其他人对此有何看法...

【解决方案6】：

这就是我所做的。

$('.fancybox').hover(
    function(){
        $(this).attr('alt',$(this).attr('title'));
        $(this).attr('title','');
    },
    function(){
        $(this).attr('title',$(this).attr('alt'));
        $(this).removeAttr('alt');
    }
).click(function(){
    $(this).attr('title',$(this).attr('alt'));
    $(this).removeAttr('alt');
});

【讨论】：

【解决方案7】：

您可以挂钩 'mouseenter' 事件并返回 false，这将停止显示本机工具提示。

$(selector).on( 'mouseenter', function(){
    return false;
});

【讨论】：

【解决方案8】：

可以使用jQuery 抑制这种行为

var tempTitle;
$('[title]').hover(
  function(e) {
    debugger;
    e.preventDefault();
    tempTitle = $(this).attr('title');

    $(this).attr('title', '');
    // add attribute 'tipTitle' & populate on hover
    $(this).hover(
      function() {
        $(this).attr('tipTitle', tempTitle);
      }
    );
  },
  // restore title on mouseout
  function() {
    $(this).attr('title', tempTitle);
  }
);

.progress3 {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.progress3:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
.progress3:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
  title='abc' will not be displayed
</div>

fiddle

【讨论】：