如何在任何東西上顯示工具提示

我在工具提示上顯示的問題不是最重要的。我試圖將z-index改爲非常高的數字，但這並不起作用。如何在任何東西上顯示工具提示

CSS：

a.tooltipA { 
outline:none; 
} 

a.tooltipA strong { 
line-height:30px; 
} 

a.tooltipA:hover { 
text-decoration:none; 
} 

a.tooltipA span { 
z-index:10; 
display:none; 
padding:14px 20px; 
margin-top:-30px; 
margin-left:28px; 
width:300px; 
line-height:16px; 
} 

a.tooltipA:hover span { 
display:inline; 
position:absolute; 
color:#111; 
border:1px solid #DCA; 
background:#fffAF0; 
} 

.callout { 
z-index:20; 
position:absolute; 
top:30px; 
border:0; 
left:-12px; 
} 

/*CSS3 extras*/ 

a.tooltipA span { 
border-radius:4px; 
box-shadow: 5px 5px 8px #CCC; 
}

HTML：

html += '<a href="#" class="tooltipA">' 
html += '<span>' + "Tooltip text" 
html += '</span></a>';

你可以看看這個代碼：一是提示不完全可見。 JSFiddle

如果可能我想使用css/html的答案，但JavaScript也是一個選項。我無法使用jquery。如果你需要更多的細節，請告訴我。我也使用引導程序3，但我猜想這並不重要，因爲JSFiddle也會發生同樣的情況。

來源

2015-04-20 Mariusz

您的意思是它不完全可見，因爲頂部工具提示的頂部會從視口的頂部移開？我沒有看到任何其他元素重疊... –

是的，小提琴問題只是一個問題，負面的頂部邊緣將其定位在頁面的頂部...... – Ted

JSfiddle的唯一問題是-30px在邊際上。當我刪除它，它完美解決 –

您的小提琴的問題是margin-top：a.toolTipA範圍內的-30px將頂部鏈接的工具提示移出視口。您需要至少在頁面的下方開始您的項目，或者從css中刪除該行。

根據this先前的stackoverflow後，設置位置：固定將保持您的元素在視口中。

來源

2015-04-20 14:05:10 MuppetGrinder

嘿，是啊它修復了JSFiddle，但我試過在我的網站上，它仍然無法正常工作，我在我的css中使用overflow-y/x。我什至不知道在哪裏哈哈。看看這個[屏幕]（http://gyazo.com/c28cdf0afc828fef2f5ccc663e1f45cb）或直接去 [Project]（http://tarnos12.github.io/project/）這是不是最新的，但如果您調整窗口大小並將鼠標懸停在「？」上在「STR，END」等左側統計信息附近標記，你會注意到工具提示隱藏在所有內容後面-_- – Mariusz

我發現了一個bug：在我的引導程序css中： '.container {padding-right：15px; padding-left：15px; margin-right：auto; margin-left：10px; overflow-y：auto; overflow-x：auto; }' overflow-x或/和y會導致這種情況發生。但我想盡可能使用它們，有沒有辦法讓工具提示顯示在頂部並忽略溢出？ – Mariusz

我無法在項目鏈接上獲得加載工具提示，但是我可以從屏幕上看到它是相同的問題，您的工具提示顯示在可用視口之外。我發現這個http://stackoverflow.com/questions/13680501/keep-an-absolutely-positioned-element-in-viewport-jquery哪些可以幫助一些？ – MuppetGrinder

如何在任何東西上顯示工具提示

回答

相關問題