如何使純css浮動工具提示（絕對定位跨度）動態調整大小以適應文本

Question

我最近有一個使用CSS偽類的想法:hover當鼠標懸停在鏈接上時， :hover以顯示樣式化的工具提示。

鏈接的基本代碼如下所示：

 .hasTooltip { position:relative; } .hasTooltip span { display:none; } .hasTooltip:hover span { display:block; background-color:black; border-radius:5px; color:white; box-shadow:1px 1px 3px gray; position:absolute; padding:5px; top:1.3em; left:0px; max-width:200px; /* I don't want the width to be too large... */ } 

 <a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a> 

結果正是我想要的 ，但有一個惱人的問題：跨度不擴展以容納文本，如果我沒有指定寬度，文本被壓扁。

我在谷歌上做了一些搜索，發現了一些人們做過的工作的例子（ 這個例子與我所得到的相似），但似乎沒有人解決我所擁有的span寬度問題。

Answer 1

我知道這個答案非常晚，但看起來你的問題的關鍵是使用：

white-space: nowrap;

在您的范圍內，並擺脫任何類型的寬度定義。 當然，缺點是工具提示只能支持一行。 如果你想要一個多線解決方案，你很可能必須使用javascript。

以下是此方法的示例： http ： //jsbin.com/oxamez/1/edit

另外一個好處是，它一直可以運行到IE7。 如果你不需要支持IE7，我建議折疊跨度，並將img樣式分為：before，和：after.tooltip。 然后，您可以使用data- *屬性填充文本。

Answer 2

我不認為純CSS有一個完美的解決方案。 第一個問題是當你將span放在a標簽內時， span只想擴展到鏈接的寬度。 如果你在a之后放置span ，你可以接近你想要做的但是你必須設置margin-top: 1.3em然后必須設置一個負邊距來滑動工具提示。 但是，它將是一個固定的設置，因此它不會完全位於每個鏈接的開頭。

我掀起了一個動態設置left的jQuery解決方案（以及一個很好的小淡入淡出效果）。

演示： http ： //jsfiddle.net/wdm954/9jaZL/7/

$('.hasTooltip').hover(function() {
    var offset = $(this).offset();
    $(this).next('span').fadeIn(200).addClass('showTooltip');
    $(this).next('span').css('left', offset.left + 'px');
}, function() {
    $(this).next('span').fadeOut(200);
});

Answer 3

這些工具提示也可以輕松地集成到word press主題中。 只需將CSS復制到您的樣式中即可。 Css文件和創建帖子時，只需獲取HTML代碼的幫助並創建自己的工具提示。 休息是所有造型，可以根據您自己的選擇進行更改。 您也可以在工具提示框內使用圖像。

http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

Answer 4

我找到了這個，它對我有用。 當你在同一頁面上有很多元素和jquery插件而你無法使用它時，這是一個很好的解決方案

<a href="#">Text <span>Tooltip</span></a>

查看純CSS解決方案： JS BIN

感謝trezy.com

Answer 5

即使這個問題已經有點老了，我建議以下妥協：
只需使用max-width：200px; 最小寬度：300％; 或者，
而最小寬度可能導致高於最大寬度。
試一試。
這樣你就不可能有完全液體的工具提示，但寬度與包含鏈接元素的寬度有相關性。
就光學愉悅而言，這種方法可能是有價值的。

---

編輯 ：
好吧，我必須承認我寫的是胡說八道。 當最小寬度可以高於最大寬度時，沒有任何意義。 因此，只需將最小寬度設為百分比即可實現我的建議。 對不起。