画像タイトルのCSSを変更するにはどうすればよいですか？

Question

イメージタグを使用しています。タイトルに背景と罫線を追加したいと思います。ここ

<img class="Notestooltip" src="/files/404048/93171/Info-32.png" height="15" width="15" title="test test" style=""/> 

Answer 1

ここtootltip http://jsfiddle.net/tg5op333/33/
を用いた例であるCSS3 http://jsfiddle.net/tg5op333/34/

HTML（bootstapツールチップ）

<a href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="test test" class="my-tooltip">Tooltip on bottom 
</a> 

JS使用例である：（bootstapツールチップ）

$(document).ready(function(){ 
    $("a").tooltip(); 
    }); 

を

CSS：（bootstapツールチップ）

.my-tooltip + .tooltip > .tooltip-inner {background-color: #777;} 
.my-tooltip + .tooltip > .tooltip-arrow { border-bottom-color:#777; } 

HTML（CSS3）

<a href="#" title="test test">Tooltip on bottom 
</a> 

CSS3

a { 
    color: #900; 
    text-decoration: none; 
} 

a:hover { 
    color: red; 
    position: relative; 
} 

a[title]:hover:after { 
    content: attr(title); 
    padding: 4px 8px; 
    color: #333; 
    position: absolute; 
    left: 0; 
    top: 100%; 
    white-space: nowrap; 
    z-index: 20px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222; 
    -webkit-box-shadow: 0px 0px 4px #222; 
    box-shadow: 0px 0px 4px #222; 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
} 

Answer 2

CSS 3は良い方法ですので、私はウェルに行って言って序文する必要がマットつまり、JQueryを使用することができれば少し少なくしたいと言われています。

<script> 
$(document).ready(function(){ 
    $('.Notestooltip').hover(
     function() { 
     var tip_title = $(this).attr('title'); 
     $(this).parent('div').append('<div style="position: relative; left: 5px; top: -10px; width: 100px;"><p class="custom_tip">' + tip_title + '</p></div>'); 
     }, function() { 
     $('.custom_tip').parent('div').remove(); 
     } 
    ); 
}); 
</script> 

ここは私のCSSとHTMLです。

<style> 
p.custom_tip{ 
    padding: 10px; 
    background-color: gray; 
    color: white; 
    text-shadow: 1px 1px 1px black; 
} 
</style> 

<div><img class="Notestooltip" src="https://suvendugiri.files.wordpress.com/2012/02/checkbox.png" height="15" width="15" title="test test" style=""/></div> 

これは完全にカスタマイズ可能で、特定の画像のタイトルを表示して消します。基本的にjqueryコーダーのCSS 3と同じです。