12

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

8 回答 8

23

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

但是，有一些解决方法。

假设您的意思是要保留链接和元素上的 title 属性，您可以使用 Javascript 删除 title 属性onmouseover()并再次将其设置为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;
        }
    }
}
于 2009-01-19T11:57:01.870 回答
9

将此元素添加到您的 html 

    onmouseover="title='';"

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

于 2012-06-13T04:10:20.503 回答
7

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

.suppress {
    pointer-events:none;
}

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

于 2013-08-07T13:49:50.887 回答
4

在原型中这样的东西会用“dtstart”类来清空日期时间微格式的所有标题属性：

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

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

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

于 2009-01-19T11:57:11.857 回答
3

这对解决您的问题无济于事，但可能很有趣：除此之外，还有另一个通用属性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;
}
于 2009-01-19T12:48:28.913 回答
3

这就是我所做的。

$('.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');
});
于 2011-09-01T07:37:14.297 回答
0

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

$(selector).on( 'mouseenter', function(){
    return false;
});
于 2013-11-06T21:37:48.827 回答
-2

有可能抑制这种行为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>

小提琴

于 2016-09-27T12:49:53.083 回答