Results 1 to 9 of 9

Thread: Speech bubbles tooltip

  1. #1
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Speech bubbles tooltip

    1) Script Title: Speech bubbles tooltip

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lestooltip.htm

    3) Describe problem: Where can I change the distance between hyperlink and tooltip?

  2. #2
    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 the speechbubbles.css file. Add top and/or left margin as shown:

    Code:
    div.speechbubbles{
    background-color:#EDEDED; /*background color of tooltip*/
    border:1px solid black;
    position:absolute;
    top:0;
    z-index:100;
    visibility:hidden;
    line-height:1.3em;
    padding:8px;
    width:200px; /*default width of tooltip*/
    border-radius:8px; /*CSS3 border radius*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 0 10px #888888; /*CSS3 shadow*/
    -moz-box-shadow:0 0 10px #888888;
    -webkit-box-shadow:0 0 10px #888888;
    margin-top: 20px;
    margin-left: 30px;
    }
    Negative values are allowed.
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much!

  4. #4
    Join Date
    Feb 2011
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello,

    I did this and it works fine when the arrow is facing upwards, That is, if the animation comes from bottom to top. I'm able to position the arrow just beneath the link where it gets underlined if you put the mouse on it. The other way around it's 'different'. I've got a vertical list and if the animation comes from above, it stops 1 text line above. example :

    a
    b
    c

    if I put my mouse on item c, and the animation comes from above it'll point more or less to 'top' b. I hope I make myself clear. Is there any way this could be fixed?

    Thank you.

  5. #5
    Join Date
    Jan 2009
    Location
    Jersey Shore
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm having a related problem. Instead of using inline text link to trigger the speech balloons, I am using anchors around images that are 80px height. I've done the margin-top fix and that helps, however, the separation between the stop points for the coming-from-top and coming-from-bottom arrows is not far enough. If you hold your cursor over the top or bottom 15% of the image then the speech bubble keeps coming into view over and over again because the cursor is over top the speech bubble.

    Is there a way to set the margins for top and bottom differently? I've tried

    margin: -30px auto 30px;
    margin: 30px auto 30px;
    margin: 30px auto -30px;
    margin: -30px auto -30px;

    None of these increase the "gap" between the two points. How do I increase the gap?

  6. #6
    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

    When combining the margin like that, 4 values often need to be used. Using the more verbose separated margins should work and is at least easier to keep straight in your mind:

    Code:
    margin-top: ##px;
    margin-right: auto;
    margin-bottom: ##px;
    margin-left: auto;
    where ## is replaced by the desired margin, which can be different for top and bottom. Also, instead of auto for left and right, you might be better off with 0 for those values.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  7. #7
    Join Date
    Jan 2009
    Location
    Jersey Shore
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here are a copies of my development page for you to see. I am using the script for the software/hardware icons below the "Call" number.

    On this version of the page: trishah.com/clients/ted2/ I am using: margin: 0 auto ;

    Here: trishah.com/clients/ted3/ I am using:

    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;

    When I use 30px top/bottom all that happens is the gap becomes larger but the balloon now stops further down the page and when it comes from the top, it's lower than on /ted2/.
    Last edited by jscheuer1; 07-01-2013 at 04:05 AM. Reason: user request edit URLs

  8. #8
    Join Date
    Jan 2009
    Location
    Jersey Shore
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Okay, after some playing around, I was able to find a fix...

    #icons a { height: 80px; width:100%; display:block;}

    By adding a height and display:block the url area is larger and the balloons stop at a better position with more of a gap in between. trishah.com/clients/ted2/

    I'd still like to be able to position it better but this is working okay for now.
    Last edited by jscheuer1; 07-01-2013 at 04:06 AM. Reason: user request edit URL

  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

    Still a problem in Firefox. Make the height 100% as well and that fixes it in the Fox. However, the tips would probably align best if no width or height were specified for the a tags. They should be display block. Now they will respond to hovering over the images because they will be the same dimensions as the images. With the shorter looking images though, that makes the top tip look too far away. That's because the shorter looking images are as tall as the taller ones (padded by an unseen transparent part of the image). If the shorter images were only as tall as they need to be, you could set the vertical-align on the td's to bottom, and it should all work out:

    Code:
    #icons td {vertical-align: bottom;}
    - John
    ________________________

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

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
  •