如何更改图片标题的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是一个很好的方法，因此我必须先对Matt说得好。话虽这么说，如果你想少一点，你可以使用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一样。