防止点击隐藏缩写工具提示

当我使用<abbr>元素，我通常缩写下添加一个虚线边框，表明更多的信息，请访问：防止点击隐藏缩写工具提示

enter image description here

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

但是，单击缩写隐藏工具提示，如果它已经可见，并且防止它出现，如果它尚未显示。

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

我尝试了很明显，没有运气：

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

（*） - 第2秒的Chrome，Firefox中

来源

2013-12-19 cantera

这是一个解决css悬停状态，http://jsfiddle.net/g6KeH/。我仍然试图找出'title'属性的答案。 –

您是否确实有数据显示您的用户实际上是在点击文本而不是等待工具提示？尽管abbr并不常用，但我认为没有理由相信用户会相信它是一个链接。 – cimmanon

那么希望有人能提供更好的选择，然后我做了，但那是我发现和改变的最好的选择。祝你好运！ –

约1秒这是我能找到的最好的选择。由SO question提供由Andres Ilich提供。

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

干杯！

来源

2013-12-19 19:55:11

感谢乔希 - 你的内容：attr（value）;'技巧真的很聪明。如果没有更简洁的方法，这是一个很好的回退选项。 – cantera

没问题！希望你找到一个更好的解决方案，但我最好的猜测是这个选项，或者InvisibleBacon的选择是绕过它的默认样式的唯一方法。 –

我认为得到你想要的东西的唯一方法就是替换默认的工具提示动作。乔希鲍威尔的文章包括一个很好的CSS解决方案。有JavaScript解决方案，如： http://jqueryui.com/tooltip/

来源

2013-12-19 20:02:43 InvisibleBacon

防止点击隐藏缩写工具提示

回答

相关问题