Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: Tooltips are cut outside content-div

  1. #11
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Hello Adrian,
    first many many thanks !!!

    I have tried it - but it didn't work correctly with
    $(this).children('.tooltip').appendTo('body')


    The tooltip-text is false - it shows only and always the taxonomy, nothing else (no title, no year (ajahr))
    and the tooltips are sticky

    The right thing is: the tooltip-display is uncut, and the right tooltip-image are shown

    Here is my php
    Code:
    <?php $image = rwmb_meta( 'metabox_screenshot2' );
    	if ( $image != '' ) {?> 
    	<div class="image">
    						   
    	       <div class="thumbnail-item" data-tooltip="tooltip_jq" >
    		    <a class="fancybox" href="<?php the_permalink(); ?>" ><?php echo wp_get_attachment_image($image, 'homepage-thumb'); ?></a>
    			    
    			<div class="tooltip" id="tooltip_jq>
    			  <a href="<?php the_permalink(); ?>" ><?php echo wp_get_attachment_image($image, 'homepage-tooltip-thumb'); ?></a>
    			  <p><?php the_title(); ?></p> 
    			  <p><?php the_taxonomies(array('template' => ' <span style="display:none;">%s:</span>%l ' ));  ?></p>
    			  <?php $ajahr = rwmb_meta( 'metabox_ajahr' ); ?>
    			       	<?php if ($ajahr) { ?>
    			        <p><?php echo $ajahr; ?></p>
    				<?php } else {?> <?php } ?>						              
    			</div> <!--*tooltip-->
    		</div> <!--*thumbnail-item-->
          </div> <!--*image-->
    Thanks much
    Last edited by papaver; 11-28-2012 at 08:24 PM.

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,203 Times in 3,165 Posts
    Blog Entries
    12

    Default

    With the page's current css both in the stylesheet and even inline for the spans, if you want all of the details to show up, you need to add the highlighted. However, I would recommend taking that out, and fixing the css.

    Code:
    <script type="text/javascript">
    jQuery(function($){
    
    	var aniObj = {duration: 'fast', complete: function(){$(this).remove();}};
    
    	$('div.thumbnail-item').find('span, p').show().css({color: 'white'}).end().mouseenter(function(){
    
    		$('body').children('div.tooltip').fadeOut(aniObj);
    
    		var $this = $(this), o = $this.offset(), $child = $this.children('div.tooltip'),
    		$w = $(window), wsl = $w.scrollLeft(), wrb = wsl + $w.width(), wst = $w.scrollTop(), wbb = wst + $w.height(),
    		cw = $child.outerWidth(), ch = $child.outerHeight(),
    
    		x = o.left + $this.width() / 2 - cw / 2,
    		y = o.top + $this.height() / 2 - ch / 2;
    
    		if(x < wsl) {x = wsl + 5;}
    		if(x + cw > wrb) {x = wrb - cw - 5;}
    		if(y < wst) {y = wst + 5;}
    		if(y + ch > wbb) {y = wbb - ch - 5;}
    
    		$child.clone().css({zIndex: 15, top: y, left: x, display: 'block'}).appendTo('body')
    			.mouseleave(function(){
    				$(this).fadeOut(aniObj);
    			});
    		});
    
    });
    </script>
    Tested and works with your demo that you PM'ed us. Oh and I updated to jQuery 1.8.3, not sure if that matters. Another thing, all this garbage:

    Code:
    <!doctype html>
    <!--[if lt IE 7 ]> <html lang="de-DE"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="de-DE"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="de-DE"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="de-DE"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="de-DE" class="no-js"> <!--<![endif]-->
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    will, at least in IE prevent the X-UA meta tag from working. I dealt with it like so:

    Code:
    <!doctype html>
    <html lang="de-DE">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    Then later, just after the tag for jQuery:

    Code:
    	<!-- Add jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <!--[if (gt IE 9)|!(IE)]><!-->
    <script type="text/javascript">
    $('html').addClass('no-js');
    </script>
    <!--<![endif]-->
    Last edited by jscheuer1; 11-29-2012 at 07:14 AM. Reason: add detail, later - refine code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    papaver (11-29-2012)

  4. #13
    Join Date
    Oct 2012
    Posts
    19
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Hello John
    Thanks so much - it works perfectly !!

    BTW: your "The Ocean Conservancy"-link recalls a 404

  5. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,203 Times in 3,165 Posts
    Blog Entries
    12

    Default

    Great!

    Oh, and I just clicked on the links for Ocean Conservancy in my sig and they worked fine. Perhaps it was just a temporary network glitch.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. jquery tooltips
    By davelf in forum JavaScript
    Replies: 1
    Last Post: 08-21-2009, 11:47 AM
  2. ToolTips
    By GodLovesDemeter in forum HTML
    Replies: 1
    Last Post: 01-13-2008, 11:21 AM
  3. Automatic ToolTips
    By benmajor in forum Looking for such a script or service
    Replies: 0
    Last Post: 07-14-2007, 08:14 PM
  4. Tooltips
    By bartezas16 in forum JavaScript
    Replies: 3
    Last Post: 04-15-2007, 11:17 AM
  5. Interactive CSS Tooltips
    By iblob in forum CSS
    Replies: 0
    Last Post: 04-17-2006, 08:18 PM

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
  •