I have a grid of thumnail images and I want the tooltip to appear over(not above, but rather in place of the image) on rollover. Simmilar to how it works on this site: http://lifeandtimes.com/
I have tried commenting out what I think was the javascript to reposition it, but it doesn’t work. Can someone help me figure this out.
Here is my .js file
$(document).ready(function(e) {
$('.tooltip').hide();
$('.trigger').mouseover(function() {
var ttLeft,
ttTop,
$this=$(this),
$tip = $($this.attr('data-tooltip')),
$tip = $($this.attr('title')),
triggerPos = $this.offset(),
triggerH = $this.outerHeight(),
triggerW = $this.outerWidth(),
tipW = $tip.outerWidth(),
tipH = $tip.outerHeight(),
screenW = $(window).width(),
scrollTop = $(document).scrollTop();
// if (triggerPos.top - tipH - scrollTop > 0 ) {
// ttTop = triggerPos.top - tipH - 10;
// } else {
// ttTop = triggerPos.top + triggerH +10 ;
// }
// var overFlowRight = (triggerPos.left + tipW) - screenW;
// if (overFlowRight > 0) {
// ttLeft = triggerPos.left - overFlowRight - 10;
// } else {
// ttLeft = triggerPos.left;
// }
$tip
.css({
left : ttLeft ,
top : ttTop,
position: 'absolute'
})
.fadeIn(600);
}); // end mouseover
$('.trigger').mouseout(function () {
$('.tooltip').fadeOut(600);
}); // end mouseout
}); // end ready
here is my html for that section
<div class='video_box'>
<div class='trigger' title='#tip2'>
<a href='videos.php?vid_id=2'>
<img src='video_thumbs/avengers.png'>
</a>
</div> <!-- close trigger -->
<div class='tooltip' id='tip2'>
<h2>Avengers</h2>
<hr>
<p>Trailer for the new Avengers Movie</p>
<hr>
<p><span>65 % Green Light</span></p>
</div> <!-- close tool tip -->
</div> <!-- close video box -->
here is my css
.trigger {
cursor : help;
border-bottom: 1px dashed white;
}
.trigger:hover {
color: rgb(255,0,0);
}
.tooltip {
z-index:10000;
width: 187px;
height: 120px;
padding: 0px;
background-color: white;
/*border: 3px solid rgb(195,151,51);
border-radius : 5px;*/
}
.tooltip h2 {
}
.tooltip p {
color: black !important;
}
.tooltip span {
color: green;
}
.main {
width: 800px;
}