Question

当用户将鼠标悬停在某些链接和元素上时，我想要禁止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();

Answer 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;
        }
    }
}

Answer 2

将此元素添加到您的html

    onmouseover="title='';"

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

Answer 3

使用jQuery plugin timeago时，请浏览此主题。实际上，使用CSS属性pointer-events非常简单。发布此信息是为了通过搜索引擎来到这里的人们：）

.suppress {
    pointer-events:none;
}

请注意，您不应该将此用于应该点击某些内容的链接。在这种情况下，请使用已接受的JS解决方案。

Answer 4

原型中的这样的内容会将datetime microformats的所有标题属性与'dtstart'类别一起删除：

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

注意我使用了空格，element.title个州的Mozilla文档

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

Answer 5

这对您的问题没有帮助，但可能会很有趣：除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;
}

Answer 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');
});

Answer 7

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

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

Answer 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

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

8 个答案: