僅使用CSS的工具提示

我想爲僅使用CSS的錨標籤提供工具提示。我來遠this。我試圖實現將框和尖箭頭正好放置在中心的功能，而不管文本的長度如何。僅使用CSS的工具提示

Gmail's tooltips

上面的影像就是我想要知道的。我試過保留width:auto，但它也不起作用。

2013-07-24 Anuj Kaithwas

認爲這可能是不可能的，就像這樣的CSS。您需要知道工具提示的寬度，或者能夠相對於三角形定位工具提示區域。無關，但與此類似：[hint.css]（http://kushagragour.in/lab/hint/） – robooneus

body 
{overflow-x:hidden;} 

div 
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;} 

a 
{position:relative;white-space:nowrap;} 

a > span.tooltip 
{ 
    position: absolute; 
    white-space: normal; 
    width: 100%; 
    top: 130%; 
    left: 0; 
} 

a > span.tooltip > span 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    text-align: center; 
    bottom: 0; 
    left: -500%; 
    width: 1100%; 
} 

a > span.tooltip > span > span 
{ 
    display: inline-block; 
    background: black; 
    border-radius: 4px; 
    padding: 10px; 
    color: white; 
    max-width: 300px; 
}

DEMO：在MSIE http://jsfiddle.net/b2Yqf/

作品7 8 9 10，火狐，Chrome

可能不是你所想要的東西......因爲標記與三個嵌套<span>所做出。 .. 但是，是的。它可以完成！

來源

2013-07-30 06:26:47

你面臨的主要問題是你需要一個white-space: nowrap這使你可以通過@robooneus得到hint.css。儘管如此，我無法弄清楚中心位置。任何寬度或邊距都與「工具提示」鏈接的寬度有關。找到圖像的鏈接可能也有幫助，所以我們可以研究源代碼。

EDIT1： 此外，在箭頭一個margin-left: -6px（在：之前）中心上的字提示，它抵消由邊境向右移動。

來源

2013-07-24 15:17:24

圖像絕對是從gmail中提取的。我把它拉起來看看如何做，但它不是全部CSS。如上所述，如果他知道工具提示元素的寬度，他可以使用等於寬度一半的負邊距將其放在中間。但是對於自動寬度，我認爲它不會起作用。 – robooneus

圖片來自Gmail，您可以查看它，它位於搜索框下方。我只用了螢火蟲並輸入「b」。 –

@robooneus https://dl.dropboxusercontent.com/u/96798895/k.PNG這是'white-space：nowrap'給出的。唯一的錯誤是如何根據鏈接來定位工具提示。 –

我不認爲你想要做什麼（居中工具提示）是有可能的，而有width:auto;。

如果要聲明的寬度，你可以簡單的位置與提示：

.tooltip:hover:after { 
    width:100px; /* whatever you want */ 
    left:50%; 
    margin-left:-50px; /* half the width */ 
}

編輯

正如@Alexander說，在他的回答，也重新定位使用margin-left您提示方向是一個很好的主意，因爲它略微偏離中心，只有left:50%。

來源

2013-07-24 15:34:48 robooneus

'邊距：0px'也能做到這一點，箭頭正好與「工具提示」文本的中心對齊。 [*編輯的演示*]（http://jsfiddle.net/mtxJw/6/） –

它實際上是6px，因爲您的箭頭位於單詞「Tooltip」的50％處，然後由於邊界而被右移6px。如果你仔細檢查http://jsfiddle.net/mtxJw/8/，你可以看到細微的差別。 –

是的，但由於它已經是50％，所以您只需要將其移回寬度的一半。除非三角形的寬度實際上是12px ... – robooneus

僅使用CSS的工具提示

回答

相關問題