如何在工具提示水平位於鏈接頂部

我試圖讓工具提示框被插入頂部和居中的標籤。我有這個小文本的工作，但我似乎無法讓它集中在大文本。如何在工具提示水平位於鏈接頂部

我知道它與定位盒子和箭頭有關，但我似乎無法找到合適的組合來獲得盒子下面的中心箭頭和盒子上方的盒子。

我希望只用CSS就能做到這一點。

HTML：

<div> 
    <a class="tooltip" href="#" title="tooltip"> 
     <span>Text</span>  
    </a> 

</div> 
<div> <a class="tooltip" href="#" title="tooltip"> 
     <span>TextTextText</span>  
    </a> 

</div>

CSS：

div { 
    padding: 150px; 
    display: inline-block; 
    background-color: red; 
} 
.tooltip{ 
    display: inline; 
    position: relative; 
} 
.tooltip:hover:after{ 
    background: #333; 
    background: rgba(0,0,0,.8); 
    border-radius: 5px; 
    bottom: 26px; 
    color: #fff; 
    content: attr(title); 
    padding: 10px; 
    left: -50%; 
    position: absolute; 
    z-index: 98; 
} 
.tooltip:hover:before{ 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    bottom: 20px; 
    content: ""; 
    left: 30%; 
    position: absolute; 
    z-index: 99; 
}

And here is the fiddle。

我真的很感謝任何幫助，我可以得到。

來源

2014-02-11 dbarnes

什麼'＃333 transparent'？ – bjb568

@ bjb568這是* [雙值語法]（https://developer.mozilla.org/en-US/docs/Web/CSS/border-color#Syntax）*'border-color：horizontal vertical;' –

哦。誰需要透明的邊框？ – bjb568

如果提示沒有一個明確的width，你可以對齊在水平方向上居中，用負translateX如下：

.tooltip:hover:after { 
    left: 50%; 
    transform: translateX(-50%); 
    /* other styles ... */ 
} 

.tooltip:hover:before { 
    left: 50%; 
    transform: translateX(-50%); 
    /* other styles ... */ 
}

JSFiddle Demo。

來源

2014-02-11 18:16:01

只錯過了-ms-transform：translateX（-50％）;對於IE – dbarnes

@dbarnes是的你是對的，'-o-'用於Opera 10.5-12.10 :) –

-1

您可能會發現下面的鏈接有幫助。我認爲這會做的正是你需要的東西：

http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

他們這裏有一個工作示例：

http://netdna.webdesignerdepot.com/uploads7/how-to-create-a-simple-css3-tooltip/tooltip_demo.html

來源

2014-02-11 18:36:36 steakpi

這實際上是我從我的一些CSS中得到的，他們只是沒有正確地將彈出中心對準 – dbarnes

啊是的;）好的工作確定解決方案！ – steakpi

-1

這是我可以現在想（凌晨1點:)）。適用於所有瀏覽器。

div { 
padding: 150px; 
display: inline-block; 
background-color: red; 
text-align: center; 
} 
.tooltip { 
display: inline; 
position: relative; 
} 
.tooltip:hover:after { 
background: #333; 
background: rgba(0, 0, 0, .8); 
border-radius: 5px; 
bottom: 26px; 
color: #fff; 
content: attr(title); 
padding: 10px; 
left: 50%; 
margin-left: -50px; 
position: absolute; 
z-index: 98; 
width: 100px; 
text-align: center; 
} 
.tooltip:hover:before { 
border: solid; 
border-color: #333 transparent; 
border-width: 6px 6px 0 6px; 
bottom: 20px; 
right: 50%; 
margin-right: -15px; 
content:""; 
position: absolute; 
z-index: 99; 
}

問候，阿肖克

來源

2014-02-11 19:45:59

我想你需要補習查看Create CSS3 Tooltip和主要代碼是

<a title="Create Simple Tooltip Using CSS3" class="tooltip">Some Sample CSS3 Tooltip</a> 

.tooltip 
{ 
display: inline; 
position: relative; 
} 
.tooltip:hover:after 
{ 
background: #333; 
background: rgba(0,0,0,.8); 
border-radius: 5px; 
bottom: 26px; 
color: #fff; 
content: attr(title); 
left: 20%; 
padding: 5px 15px; 
position: absolute; 
z-index: 98; 
width: 220px; 
} 

.tooltip:hover:before 
{ 
border: solid; 
border-color: #333 transparent; 
border-width: 6px 6px 0 6px; 
bottom: 20px; 
content: ""; 
left: 50%; 
position: absolute; 
z-index: 99; 
}

來源

2016-06-08 07:33:01 mrinal

如何在工具提示水平位於鏈接頂部

回答

相關問題