禁用链接和上的浏览器工具提示
当用户将鼠标hover在某些链接和元素上时，我想要禁止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(); 据我所知，实际上无法显示标题标签。
但是有一些解决方法。
假设您想要保留链接和元素的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; } } }
将此元素添加到您的html中
onmouseover="title='';"
例如，我有一个asp.net复选框我存储一个隐藏的变量，但不希望用户看到作为工具提示。
使用jQuery插件timeago时，请浏览此线程。 实际上，使用CSS属性pointer-events解决方案非常简单。 发布此信息是为了通过搜索引擎来到这里的人们的利益:)
.suppress { pointer-events:none; }
请注意，您不应该将此用于应该点击某些内容的链接。 在这种情况下，使用接受的JS解决方案。
原型中的这样的东西将使用’dtstart’类别清空datetime微格式的所有标题属性：
$$('abbr.dtstart').each(function(abbr){abbr.title=' '})
注意我使用了一个空格，即element.title状态的Mozilla文档
根据错误264001 ，将标题设置为空字符串会触发默认的inheritance行为。 要取消inheritance，必须将title设置为非空的空白字符串。
这对你的问题没有帮助，但可能会很有趣：除了可以用来存储数据的title之外还有另一个通用属性 – lang ！
只需将要存储的数据转换为连续字符串，并使用'x-'作为前缀，以根据RFC 1766声明私有用法。
在评论中，sanchothefat澄清说他希望用微格式中的abbr-design-pattern来解决可用性问题。 但是还有其他模式在语义上有意义（或者，在我看来更是如此），而不是这种模式。 我要做的是：
The party is at 10 o'clock on the 10th 20051010T10:10:10-010.
和这些风格在一起
dfn.micro-date { font-weight: inherit; font-style: inherit; } dfn.micro-date var { display: none; }
在我看来，语义上最正确的方法是使用dl定义列表 – 这在段落中是不允许的。 这可以使用以下模式解决：
The party is at 10 o'clock on the 10th
.
- 10 o'clock on the 10th
- 20051010T10:10:10-010
这需要更复杂的样式表：
q[cite='#micro-dates']:before { content: ''; } q[cite='#micro-dates']:after { content: ''; } dl#micro-dates { display: none; }
这就是我做的。
$('.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'); });
您可以挂钩’mouseenter’事件并返回false，这将停止显示本机工具提示。
$(selector).on( 'mouseenter', function(){ return false; });
使用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; }
title='abc' will not be displayed