Help with jquery tooltip

JavaScript
1

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;	
}
2

Hi there,

This is a nice a simple thing to do, not too much JavaScript required at all :slight_smile:

First let’s take your markup and improve it a tiny bit.


<div class="video_box">
    <a href="videos.php?vid_id=2" class="trigger">
        <img src="http://placehold.it/250x150">
    </a>
        
    <div class="tooltip">
        <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 -->

I removed the extra “trigger” div, we don’t really need it, and removed the ID reference to the tooltip.

Now, on to the JavaScript, currently, a lot of that is there to deal with positioning, so we don’t really need it as that will be taken care of in the CSS


$(document).ready(function(){
     // The .on() method requires jQuery 1.7+
    $(".video_box").on("mouseenter mouseleave", function(e){

        if (e.type === "mouseenter") {
            //show tooltip

            //we use .stop() here so that rapid hovering doesn't keep queueing the animations.
            //we also use .fadeTo() here rather than fadeIn / fadeOut as these tend to break with
            //rapid hovering and .stop()

            $(".tooltip", this).stop().fadeTo(200,1).addClass("hover");
            
        }

        else if (e.type === "mouseleave") {

            //hide tooltip
            $(".tooltip", this).stop().fadeTo(200,0).removeClass("hover");

        }
    });
    
});

And finally the CSS :slight_smile:



/* need to make sure the parent is relatively positioned */
.video_box {
    position: relative;
    width:250px;
    height:150px;
    padding:0px;
    overflow: hidden;
    border-bottom: 1px dashed white;
}

/* If you just want to show this, we can do it with CSS, however
  if a hover effect is desired, we can do that with JavaScript 
.video_box:hover .tooltip, .video_box.hover .tooltip {
    display: block;
}
 */

.trigger {
    display: block;
}

.tooltip {
    z-index:100;
    width: 250px;
    height: 150px;
    padding: 0px;
    position: absolute;
    top:100%;
    background-color: white;
    top:0px;
    left:0px;
    display: none; /* You could do this with JS as well */
    padding:5px;
}

.tooltip h2 {
    font-size: 18px;
    margin:5px 0;
}

.tooltip p {
    color: #000;
    margin:5px 0;
}

.tooltip span {
    color: #008000;    
}

Hopefully this helped you on your way. Let me know if you have any questions.

3

Thanks!!! That got it working perfect.