觸發工具提示<img>標記懸停

Question

我想在<img>標記上使用CSS添加工具提示，但我無法使其正常工作。

這裏就是提示可與<a href> </a>標籤，但試圖在同一應用到<img>標籤不

http://jsfiddle.net/ronluna/6sgLagrr

我怎樣才能觸發提示顯示，而徘徊在<img>

爲例

/* Base styles for the element that has a tooltip */ 
 
img, 
 
[data-tooltip], 
 
.tooltip { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 

 
/* Base styles for the entire tooltip */ 
 
img:before, 
 
img:after, 
 
[data-tooltip]:before, 
 
[data-tooltip]:after, 
 
.tooltip:before, 
 
.tooltip:after { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
 
    opacity: 0; 
 
    -webkit-transition: 
 
\t opacity 0.2s ease-in-out, 
 
\t \t visibility 0.2s ease-in-out, 
 
\t \t -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
\t -moz-transition:  
 
\t \t opacity 0.2s ease-in-out, 
 
\t \t visibility 0.2s ease-in-out, 
 
\t \t -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
\t transition:   
 
\t \t opacity 0.2s ease-in-out, 
 
\t \t visibility 0.2s ease-in-out, 
 
\t \t transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    transform:   translate3d(0, 0, 0); 
 
    pointer-events: none; 
 
} 
 

 
/* Show the entire tooltip on hover and focus */ 
 
img:hover:before, 
 
img:hover:after, 
 
img:focus:before, 
 
img:focus:after, 
 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after, 
 
[data-tooltip]:focus:before, 
 
[data-tooltip]:focus:after, 
 
.tooltip:hover:before, 
 
.tooltip:hover:after, 
 
.tooltip:focus:before, 
 
.tooltip:focus:after { 
 
    visibility: visible; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
 
    opacity: 1; 
 
} 
 

 
/* Base styles for the tooltip's directional arrow */ 
 
img:before, 
 
.tooltip:before, 
 
[data-tooltip]:before { 
 
    z-index: 1001; 
 
    border: 6px solid transparent; 
 
    background: transparent; 
 
    content: ""; 
 
} 
 

 
/* Base styles for the tooltip's content area */ 
 
img:after, 
 
.tooltip:after, 
 
[data-tooltip]:after { 
 
    z-index: 1000; 
 
    padding: 8px; 
 
    width: 160px; 
 
    background-color: #000; 
 
    background-color: hsla(0, 0%, 20%, 0.9); 
 
    color: #fff; 
 
    content: attr(data-tooltip); 
 
    font-size: 14px; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
} 
 

 
/* Directions */ 
 

 
/* Top (default) */ 
 
[data-tooltip]:before, 
 
[data-tooltip]:after, 
 
img:before, 
 
img:after, 
 
.tooltip:before, 
 
.tooltip:after, 
 
.tooltip-top:before, 
 
.tooltip-top:after { 
 
    bottom: 100%; 
 
    left: 50%; 
 
} 
 

 
[data-tooltip]:before, 
 
.tooltip:before, 
 
img:before, 
 
.tooltip-top:before { 
 
    margin-left: -6px; 
 
    margin-bottom: -12px; 
 
    border-top-color: #000; 
 
    border-top-color: hsla(0, 0%, 20%, 0.9); 
 
} 
 

 
/* Horizontally align top/bottom tooltips */ 
 
[data-tooltip]:after, 
 
.tooltip:after, 
 
img:after, 
 
.tooltip-top:after { 
 
    margin-left: -80px; 
 
} 
 

 
[data-tooltip]:hover:before, 
 
[data-tooltip]:hover:after, 
 
[data-tooltip]:focus:before, 
 
[data-tooltip]:focus:after, 
 
img:hover:before, 
 
img:hover:after, 
 
img:focus:before, 
 
img:focus:after, 
 
.tooltip:hover:before, 
 
.tooltip:hover:after, 
 
.tooltip:focus:before, 
 
.tooltip:focus:after, 
 
.tooltip-top:hover:before, 
 
.tooltip-top:hover:after, 
 
.tooltip-top:focus:before, 
 
.tooltip-top:focus:after { 
 
    -webkit-transform: translateY(-12px); 
 
    -moz-transform: translateY(-12px); 
 
    transform:   translateY(-12px); 
 
}

<br> 
 
<br> 
 
<a href="#" data-tooltip="This is a test">Test1</a> 
 
<a href="#" class="tooltip" data-tooltip="THIS IS A TEST">Test2</a> 
 

 
<img src="http://ctrlable.com/site/wp-content/uploads/2015/03/ctrlable_logo_white_cyan.png" class="tooltip" data-tooltip="THIS IS A TEST"> 
 
\t \t

？

Answer 1

圖片是自閉標籤，因此您無法在內容添加之前或之後添加圖片。將其包裝在一個範圍內並在其中添加工具提示。

PS其他自閉合標籤是例如輸入，小時，BR