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

IT技术 javascript jquery accessibility microformats
2021-02-24 09:37:27

当用户将鼠标悬停在某些链接和元素上时,我想抑制 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();
6个回答

据我所知,实际上不可能抑制显示标题标签。

但是,有一些解决方法。

假设您的意思是要保留链接和元素上的 title 属性,您可以使用 Javascript 删除标题属性 atonmouseover()并再次将其设置为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 这样的插件中。很有用谢谢。
2021-04-21 09:37:27
呵呵。Christoph 经常提到这一点。我实际上已经改变了我的方式,谢谢克里斯托夫
2021-04-22 09:37:27
JavaScript-Memory-Consumption-Awareness-Day:不要在循环中使用函数文字,如果可能,将它们移出循环!
2021-04-27 09:37:27
我猜想实际上抑制默认浏览器行为是不可能的?那将是理想的,但我确实喜欢这个解决方案。
2021-05-07 09:37:27
在微格式日期的情况下,标题属性是机器可读的内容,这意味着不幸的是,它不太有用,甚至对某些屏幕阅读器用户来说也很混乱。
2021-05-19 09:37:27

将此元素添加到您的 html

    onmouseover="title='';"

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

使用jQuery 插件 timeago时遇到了这个线程实际上,使用 CSS 属性的解决方案非常简单pointer-events发布此信息是为了人们通过搜索引擎来到这里的好处:)

.suppress {
    pointer-events:none;
}

请注意,您不应该将它用于应该点击某些内容的链接之类的内容。在这种情况下,请使用公认的 JS 解决方案。

原型中的类似内容将使用“dtstart”类将日期时间微格式的所有标题属性清空

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

注意我使用了一个空格,element.title的 Mozilla 文档说明

根据错误 264001,将 title 设置为空字符串会触发默认的继承行为。要取消继承,必须将 title 设置为非空的空白字符串。

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

这对您的问题没有帮助,但可能仍然很有趣:除此之外,还有另一个通用属性title可用于存储数据 - lang!

只需将您要存储的数据转换为连续字符串并为其添加前缀'x-'以根据 RFC 1766 声明私有用途。


在评论中,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;
}
PS:如果您真的在邮件列表中发布了一条消息,如果您能再添加一条评论,我将不胜感激 - 我没有关注这个列表,但我至少会检查档案,看看其他人对此有何看法...
2021-04-22 09:37:27
我试图(某种程度上)解决的问题是微格式中 abbr-design-pattern 的持续流行。他们的选择之一是使用语义最正确的可用标记和使用“标题”属性的日期缩写。不幸的是存在可访问性问题
2021-04-23 09:37:27
那里非常有趣,值得深思,我可能有点草率地选择了答案......
2021-05-02 09:37:27
随意使用这些建议做任何你喜欢的事情 - 我已经在 #microformats 上征求意见 - 其中包括尝试合并某种形式的包含模式以支持现有工具的建议
2021-05-07 09:37:27
您想将此建议发布到 uF-discuss 邮件列表/IRC 还是我应该发布?
2021-05-14 09:37:27