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

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

不过,还有一些解决办法。

假设您想保留链接和元素的标题属性,可以使用javascript删除位于 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;
        }
    }
}

将此元素添加到HTML

    onmouseover="title='';"

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

当使用 jQuery plugin timeago . 实际上,使用css属性的解决方案非常简单 pointer-events . 为了通过搜索引擎来这里的人的利益,发布此消息:)

.suppress {
    pointer-events:none;
}

请注意,您不应该将此应用于诸如应该单击某个链接之类的内容。在这种情况下,使用接受的JS解决方案。

在原型中,类似这样的内容将使 datetime microformats 使用“dtstart”类:

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

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

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

这对你的问题没有帮助,但可能很有趣:除了 title 可用于存储数据- lang !

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

在评论中,Sanchothefat澄清了他想用微格式的abbr设计模式来解决可用性问题。但是还有其他一些模式在语义上比这个模式更有意义(或者,在我看来更重要)。我会怎么做:

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

这就是我所做的。

$('.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;
}

<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