Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Tooltips are cut outside content-div

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

    Default Tooltips are cut outside content-div

    The display of my tooltips in the content area is cut off from the surrounding div-container.
    When the tooltip extends into the header- or footer-div-area, it will be cut.

    Code:
    <script type="text/javascript">
    $(document).ready(function () {
     $('div.thumbnail-item').mouseenter(function(e) {
    
      x = e.pageX - $(this).offset().left;
      y = e.pageY - $(this).offset().top;
    
      $(this).css('z-index','15')
      .children("div.tooltip")
      .css({'top': y - 150,'left': x - 50,'display':'block'});
       
     }).mousemove(function(e) {
     
      x = e.pageX - $(this).offset().left;
      y = e.pageY - $(this).offset().top;
     
     }).mouseleave(function() {
     
      $(this).css('z-index','1')
      .children("div.tooltip")
      .animate({"opacity": "hide"}, "fast");
     });
    
    });
    </script>
    Have tried to solve the problem with appendTo ('body') or append, but by then the php-generated content tooltip no longer display correctly, and all tooltips appear in the upper left corner of the screen.
    What option is there to let the tooltips display correctly?

    Thanks much!

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by papaver View Post
    What option is there to let the tooltips display correctly?
    Without seeing the HTML markup you're using, it's difficult to say.

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    If your page is not yet published, you can make a test case using online tools like jsfiddle.

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

    Default

    Hello Adrian,
    thanks for your quick response!

    Here http://jsfiddle.net/SWs3P/1/
    you can see my cut tooltips

    Thanks so much!

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

    Default

    Quote Originally Posted by papaver View Post
    Hello Adrian,
    thanks for your quick response!

    Here http://jsfiddle.net/SWs3P/1/
    you can see my cut tooltips

    Thanks so much!



    P.S.: To remove "overflow:hidden" inside #content did not work on my wordpress-site, only on jsfiddle - unfortunately



    a few hours later ....

    I have catched it – it is the jscrollpane
    http://jscrollpane.kelvinluck.com/basic.html
    It needs „overflow: auto“, and this is the reason for the cut tooltips.
    But it is not the solution for my problem - I need scrollpane and full-tooltip-display.

    How can I manipulate the tooltip-display with jQuery for a completely tooltip-display?

    And here is the updated jsfiddle http://jsfiddle.net/SWs3P/4/

    Thanks so much!
    Last edited by papaver; 11-27-2012 at 08:31 PM.

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    I think your best approach here would be, when you check the position of the mouse, to also check how close you are to the top/bottom/left/right side of the scrollpane. Compare that to the width/height of the tooltip, and reposition it appropriately.

    I am not familiar enough with javascript to give a concrete suggestion on how to implement this, but I'll experiment with it if I have some free time tomorrow.

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

    Default

    Hello Adrian,
    thanks for your answer.
    I have tried another version
    http://jsfiddle.net/DkUPL/2/
    In jsfiddle you see nothing (unfortunaly)
    On my test-page, the tooltip-display is not cut – jeh
    But the tooltips are shown always the same Tooltip-image with the same Tooltip-text, regardless which parent image are hovered.
    (image and text are generated/queried with php)

    If you experiment with the tooltip-display, the tooltip-dimension is differently, not always the same. Therefore I would display the tooltip over the parent-image.

    Thanks so much

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    In your last post there you say it's working except for the tip always being the same, that sounds like a problem with how you are having PHP generate the tips and/or how you're having PHP generate some other part of the javascript and/or HTML code.

    I'm a bit busy now. When I get more time I will have a closer look if traq hasn't helped you figure it out by then. traq's very good at this sort of thing.

    I'm making this post to perhaps point him in the right direction, though I doubt he needs that, and since you PM'ed me for help on it, to keep this thread on my radar (since I'm now in it, I will notice when it gets added to).

    It would help if we had a link to the actual test page, the one where you say it's now working but with the same tip always showing.
    Last edited by jscheuer1; 11-28-2012 at 03:54 PM.
    - John
    ________________________

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

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    I've been fiddling with checking the tooltip's position against the borders of the scrollpane, but I'm not getting the results I'm intending so far. I'm not figuring out why, just yet. I'll let you know as soon as I have something productive (what I have now would just be confusing).

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    The OP says they have that part solved. If they give us a link to that page, that might help you figure it out.
    - John
    ________________________

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

  10. #10
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    whoops, sorry, missed that part.

    [the OP does not want to make the actual page public, at this point, but this is the relevant javascript:]
    Code:
    $(document).ready(function () {
      
     // Get all the thumbnail
     $('div.thumbnail-item').hover(function(e) {
    
      $('.tooltip').appendTo('body')
      .hide()
      .css({
      	top: e.pageY -150,
      	left: e.pageX -150})
      	.fadeIn(320);
     
    
       
     }).mousemove(function(e) {
       
      // Calculate the position of the image tooltip   
      x = e.pageX - $(this).offset().left;
      y = e.pageY - $(this).offset().top;
       
      // This line causes the tooltip will follow the mouse pointer
    //  $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
       
     }).mouseleave(function() {
       
      // Reset the z-index and hide the image tooltip 
      $(this).css('z-index','1')
      .children("div.tooltip")
      .animate({"opacity": "hide"}, "fast");
     });
    
    });
    again, papaver, you'll get lots more useful help if you make your actual page available for people to see...

    I think the problem is $('.tooltip').appendTo('body') - you're selecting all ".tooltip" elements, so you'll always end up append()ing the first one (not necessarily the one you want).

    Edit: <!-- ignore this. see edit #2 below. -->
    nevermind my suggestion: you've changed your HTML and moved the tooltips outside their thumbnails, so there's no easy way to associate the two. You might add a data-tooltip attribute to the thumbnails, and an id to the tooltip so you can find the appropriate tooltip when you hover on a thumbnail. Example:
    HTML Code:
    <!--  code  -->
    
    <div class="tooltip" id="tooltip_42">
        <p>your tooltip
    </div>
    
    <!--  tons of code  -->
    
    <div class="thumbnail-item" data-tooltip="tooltip_42">
        <img>
    </div>
    
    <!--  tons more code  -->
    Code:
    $('div.thumbnail-item').hover(function(e) {
    
        var tooltip_id = $(this).attr( 'data-tooltip' );
    
        $( '#'+tooltip_id ).appendTo('body')
          .hide()
          .css({
             top: e.pageY -150,
             left: e.pageX -150})
          .fadeIn(320);
     })  //  . . .
    p.s. I'm not sure there's any need to append the tooltip to the body...? It's already in the DOM, does it not work to just reposition it and fadeIn?

    Edit: #2

    nevermind, nevermind:

    I think I was right the first time. Forget about my first edit. In your original code, get rid of $('.tooltip').appendTo('body') and try $(this).children('.tooltip').appendTo('body') instead.

    I still think appendTo is a bad idea, however. Maybe John can weigh in on this. Here's the problem as I see it currently: in order for the tooltips to not be "cut off" by the scrollpane, they need to be *outside* the scrollpane (that's why you're trying to append them to the end of the body). Would it work to, instead, have a "tooltip-container" outside the scrollpane, and just load the contents of the appropriate tooltip into it when needed?

    I'm sorry about the guesswork. Your page is a bit difficult to experiment with.

    (BTW: it's not really needed anymore, but if you want to assign an id to each tooltip, they each need to be unique[different]. You're also missing the closing quote [ " ], which is why jQuery isn't finding any of them.)
    Last edited by traq; 11-28-2012 at 07:31 PM.

  11. The Following User Says Thank You to traq For This Useful Post:

    papaver (11-29-2012)

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
  •