防止點擊隱藏縮寫工具提示

當我使用<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

防止點擊隱藏縮寫工具提示

回答

相關問題