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

Question

当我使用<abbr>元素时，我通常会在缩写下添加虚线边框，以表示可以获得更多信息：

工具提示需要大约两秒才能显示*，因为它不是即时的，用户点击文本似乎很自然（特别是因为它看起来类似于链接）。

但是，如果工具提示已经可见，则点击该缩写会隐藏工具提示，并防止它在尚未显示的情况下出现。

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

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

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

（*） - Chrome中2秒，Firefox中约1秒

Answer 1

这是我能找到的最佳选择。由Andres Ilich提供此SO question。

（他回答的问题不属于这个问题，但他构建这个元素的方式实际上解决了你的问题。）（这不是我的工作，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

干杯！

Answer 2

我认为获得所需内容的唯一方法是替换默认的工具提示操作。 Josh Powell的帖子包括一个很好的CSS解决方案。有javascript解决方案，如： http://jqueryui.com/tooltip/