Resim başlığının CSS'sini nasıl değiştirebilirim?

Question

Resim etiketini kullanıyorum ve başlığa arka plan ve kenarlıklar eklemek istiyorum. (Bootstap ipucu)

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

: Burada

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

Answer 1

Burada http://jsfiddle.net/tg5op333/33/
tootltip kullanan bir örneği, bir örnek CSS3 http://jsfiddle.net/tg5op333/34/

HTML kullanarak (bootstap ipucu)

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

JS olduğu

CSS: (bootstap ipucu)

.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 iyi bir yöntemdir, bu yüzden de yapılan söyleyerek Önsöz zorunda Mat. Diyorsun ki, biraz daha az istiyorsan Jquery'yi kullanabilirsin.

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

İşte css ve html'im.

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

Bu tamamen özelleştirilebilir ve belirli bir resmin başlığını listeler ve kendini kapatır. Temel olarak jquery kodlayıcılar için CSS 3 gibi.