单击时防止隐藏Abbr工具提示

Question

当我使用<abbr>元素时,我通常在缩写下添加一个虚线边框,表示有更多信息可用:

工具提示需要大约两秒才能显示*,并且由于它不是即时的,因此用户点击文本似乎很自然(特别是因为它看起来类似于链接).

但是,如果工具提示已经可见,则单击该缩写会隐藏工具提示,并防止它在尚未显示时出现.

有没有办法防止这种点击行为？

我没有运气地尝试了明显的事情:

$('abbr').on('click', function(e) { e.preventDefault(); });

(*) - Chrome中为2秒,Firefox中约为1秒

Answer 1

这是我能找到的最佳选择。由Andres Ilich就这个 SO问题提供。

（他回答的问题与这个问题无关，但他构造这个元素的方式实际上正在解决您的问题。）（这不是我的工作，Andres Ilich 找到了这个答案，只是分享知识：} 对于我的版本，请参阅底端）

他正在做的是a使用伪元素来设计属性的样式。如果单击该元素，它不会隐藏该:after元素，并且是一个很好的解决方法。

（他正在使用标题值输入，这content: "";非常酷！）

以下是添加新标题的代码：

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

他的小提琴：JSFIDDLE

唯一的问题是基本标题仍然显示，但我找不到更好的解决方法。唯一不使用该title属性的其他选项是我作为评论留下的建议。

这是我使用value属性而不是title添加值的版本。​​这不会弹出两个工具提示，但仍然可以获得所需的效果。

<a href="#" value="This is another link">Mauris placerat</a>

我的小提琴：JSFIDDLE

干杯!