CODEWITHSUNDEEP
javascriptjquerycss
Karim Ali
Karim Ali

Reputation: 2453

How can I change image title's CSS?

enter image description hereI am using an image tag and I want to add background and borders to the title.

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

Upvotes: 0

Views: 106

Answers (2)

TMKAB121
TMKAB121

Reputation: 286

CSS 3 is a good method, so I have to preface by saying well done to Matt. That being said, if you want a little less you could use 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>

Here's my css and 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>

This is completely customizable and lists the title for the specific image and turns itself off. Basically just like the CSS 3 for jquery coders.

Upvotes: 0

Mateen Kajabadi
Mateen Kajabadi

Reputation: 3634

Here is an example using tootltip http://jsfiddle.net/tg5op333/33/
Here is an example using CSS3 http://jsfiddle.net/tg5op333/34/

HTML(bootstap tooltip)

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

JS : (bootstap tooltip)

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

CSS : (bootstap tooltip)

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

Upvotes: 1

Related Questions