在Pure CSS: Center Tooltip Above Text On Hover上展開 - 如果工具提示比所述容器更寬，如何讓工具提示懸停在相對於其容器的中心？純CSS：中心工具提示上方文字懸停點。 2

IE瀏覽器。這個（其中drag drag drag被切斷）：

enter image description here

應顯示爲：

enter image description here

HTML：

<span id="test" class="drag-hint"><span>drag drag drag drag drag</span>Hover me</span>

CSS：

.drag-hint { 
    position:relative; 
    margin: 50px; 
} 
.drag-hint > span { 
    background: black; 
    color: white; 
    white-space: nowrap; 
    display:none; 
} 
.drag-hint:hover > span { 
    display: inline; 
    position:absolute; 
    top: -25px; 
    left: 0; 
    right: 0; 
    text-align: center; 
}

來源

2014-10-10 Mark Boulder

請把你的代碼在你的問題，不要讓我們去尋找它。 – 2014-10-10 05:44:03

你想要它做什麼？ – 2014-10-10 05:46:29

我忘了。不要給我一種態度@JonP。 – 2014-10-10 05:47:10

這是最簡單的使用CSS3轉換的解決方案。

JSfiddle Demo

.drag-hint { 
 
    position: relative; 
 
    margin: 50px; 
 
    display: inline-block; 
 
    padding: 0 1em; 
 
    border: 1px solid red; 
 
    /* for visual reference */ 
 
} 
 
.drag-hint > span { 
 
    background: black; 
 
    color: white; 
 
    white-space: nowrap; 
 
    display: none; 
 
} 
 
.drag-hint:hover > span { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: -25px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    text-align: center; 
 
}

<span class="drag-hint"> 
 
    <span>drag drag drag drag drag</span> 
 
Hover me</span> 
 

 

 
<span class="drag-hint"> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> 
 
Hover me</span>

來源

2014-10-10 07:45:46

迄今最eleegant的解決方案。大到亞！ – 2014-10-10 12:51:49

請在代碼中嘗試修改以下代碼。

.drag-hint:hover > span { 
    display: inline; 
    position:absolute; 
    top: -25px; 
    left: 0; 
    right: 0; 
    text-align: center; 
    width:200px; 
}

來源

2014-10-10 05:47:10

對不起，雖然工具提示的長度可能會改變，但應該沒有固定的寬度。 – 2014-10-10 05:54:26

JS Bin

.drag-hint:hover > span { 
    display: table; 
    position: absolute; 
    top: -25px; 
    left: -51px; 
    right: 0; 
    text-align: center; 
    padding: 2px; 
}

來源

2014-10-10 05:49:43

對不起，應該沒有固定的位置，因爲工具提示的寬度以及它們的容器可能會改變。 IE瀏覽器。 http://twitter.com/ – 2014-10-10 05:55:12

JS Bin

我實現自己的問題。

HTML

<h1>This:</h1> 
    <div id="test" class="drag-hint"><p>drag drag drag drag drag</p>Hover me</div> 
    <h1>Should appear as:</h1> 
    <img src="http://s22.postimg.org/h1qk194bh/Untitled_2.jpg">

CSS

.drag-hint { 
    position:relative; 
    margin: 50px; 
} 
.drag-hint > p { 
    background: black; 
    color: white; 
    width: 100%; 
display: none; 
} 
.drag-hint:hover > p { 
    display: inline; 
    position:absolute; 
    top: -40px; 
    left: 0; 
    right: 0; 
    text-align: center; 
}

來源

2014-10-10 05:49:59

對不起，但工具提示未居中。 – 2014-10-10 05:53:14

是的，@JonP是對的。 – 2014-10-10 05:53:57

更好，但我懷疑全寬度背景是需要的。 – 2014-10-10 06:01:12

div的使用，而不是跨

<div id="test" class="drag-hint"><div>drag drag drag drag drag</div>Hover me</div>

a fiddle here

來源

2014-10-10 05:53:18 HTTP

對不起，但工具提示未居中。參考問題中的圖片。 – 2014-10-10 05:56:08

@JonP爲什麼downvote？對不起，因爲圖像似乎是不正確的路徑在jsbin ... – HTTP 2014-10-10 05:57:41

你讀過我的評論？這就是投票的原因，工具提示應該集中在目標上，而不是左對齊。 – 2014-10-10 05:59:32

我希望這將解決您的問題。 http://jsbin.com/xihupeyowize/1/

來源

2014-10-10 06:27:22

純CSS：中心工具提示上方文字懸停點。 2

回答

JS Bin

HTML

CSS

相關問題