SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with jquery tooltip

    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
    Code:
    $(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
    Code:
    <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
    Code:
    .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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

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

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

    Code HTML4Strict:
    <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

    Code JavaScript:
    $(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 :-)

    Code css:
     
    /* 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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2011
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!!! That got it working perfect.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •