CODEWITHSUNDEEP
jquery
Wern Ancheta
Wern Ancheta

Reputation: 23327

jquery image tooltip

What I'm trying to achieve here is an image tooltip. When I hover over a link, the corresponding image will show up. 

<html>
<head>
<style type='text/css'>
.tooltipcontent{
position:absolute;
display:none;
opacity:0.0;

}

</style>
<script type='text/javascript' src='jq.js'></script>
<script type='text/javascript'>
$(function(){

$('a').hover(

    function(){
         var currentimg= $(this).html();
         var offset =$('#link1').offset();
         $("div img[src='" + currentimg +".jpg']").css('top', offset.top).css('left', offset.left).css('display','block');
         $("div img[src='" + currentimg +".jpg']").animate({opacity: 1.0}, 300);


    },
    function(){}


);
});



</script>


</head>
<body>
<div class='tooltipcontent' id='tooltip1'>
<img src='numone.jpg'></img>
<img src='numtwo.jpg'></img>
</div>

<div id='link1'><a href='numone' target='_blank' id='viewlarger'>numone</a></div>
<div id='link2'><a href='numtwo' target='_blank' id='viewlarger'>numtwo</a></div>

 <input type='text' value='a'></input>
<div id='forimage'></div>
</body>
</html>

Upvotes: 2

Views: 682

Answers (1)

Nick Craver
Nick Craver

Reputation: 630607

The problem is that even though you're showing the <img>, from your styling the parent is still hidden:

.tooltipcontent {
  position:absolute;
  display:none;
  opacity:0.0;
}

I think you want this here:

.tooltipcontent img {
  position:absolute;
  display:none;
  opacity:0.0;
}

There are some other issues to address, for example <img> and <input> tags are self-closing, and your mouseleave handler (the second function for .hover()) needs some additions. Something like this is more what you're probably after:

$(function(){
  $('a').hover(function(){
     var currentimg= $(this).html();
     $("div img[src='" + currentimg +".jpg']").css($(this).offset()).fadeIn(300);
  }, function(){        
     var currentimg= $(this).html();
     $("div img[src='" + currentimg +".jpg']").css($(this).offset()).fadeOut(300);
  });
});

...and remove the opacity: 0.0; from the CSS. You can test it out here.

Upvotes: 2

Related Questions