工具提示框不顯示使用css

我想顯示一個工具提示框懸停圖像。我將無法使用jquery或任何其他插件。我必須使用純CSS。我看到一個演示在這裏工作。工具提示框不顯示使用css

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

我的代碼：

<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>

的jsfiddle：

http://jsfiddle.net/txeF2/

出於某種原因，我不能得到的提示框。

修訂：http://jsfiddle.net/Md5E6/4/

來源

2014-01-22 Prithviraj Mitra

也許你應該首先再現鏈接例如HTML結構。 –

這裏是一個解決方案：EXAMPLE HERE

變化.tooltip從inline到inline-block：

.tooltip { 
    display: inline-block; 
    position: relative; 
}

然後從孩子img元素中刪除絕對定位。這是造成主要問題的原因;因爲該元素已從文檔流中移除，因此導致父元素沒有尺寸並自行崩潰。

來源

2014-01-22 17:05:00

謝謝喬希。但不幸的是，我必須在類圖中使用position：absolute。 –

我已經更新了小提琴現在我得到的盒子，但盒子的位置離圖像太遠.http：//jsfiddle.net/Md5E6/3/ –

現在比較接近.. http://jsfiddle.net/Md5E6/4/ –

使用這樣的顯示工具提示

<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; 
}

如果要查看完整的代碼演示這裏是一個完整的教程Create CSS3 Tooltip

來源

2016-06-08 07:21:56 eddy

工具提示框不顯示使用css

回答

相關問題