#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    3
    Rep Power
    0

    Help with styling CSS bubble tooltips


    On this page we have some CSS bubble tooltips using code from this page.

    We made a few changes to the CSS to give the bubbles a fixed width and make the text wrap.

    However, we were unable to position the speech bubble so the tail points towards the linked bullet question mark symbol.

    (Right now the tail is hidden behind the bubble and the bubble displays over the linked bullet question mark symbol.)

    Any ideas on how to make it look better? Many thanks in advance.

    Current CSS:

    Code:
    #block-13 a[bubbletooltip]:link, a[bubbletooltip]:visited
    {
    text-decoration: none;
    position: relative;
    color : red;
    }
    
    a[bubbletooltip]:before
    {
    content: "";
    position: absolute;
    border-bottom: 21px solid #000;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
    }
    
    a[bubbletooltip]:after
    {
    width : 130px;
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:normal;
    font-family : Georgia;
    font-size : 9pt;
    font-style : italic;
    bottom: -20px;
    left: -26px;
    white-space: default;
    background: #000;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
    }
    
    a[bubbletooltip]:hover:before, a[bubbletooltip]:hover:after
    {
    visibility: visible;
    -moz-transition: visibility 0s linear .3s;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Welcome to DevShed Forums, Zaltor.

    As you (may have) found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    Here's what you said with the URLs intact:
    Originally Posted by Zaltor
    On this page we have some CSS bubble tooltips using code from this page.
    Edit:
    However, we were unable to position the speech bubble so the tail points towards the linked bullet question mark symbol.
    So what have you tried changing to correct the position?
    Last edited by Kravvitz; September 1st, 2013 at 08:34 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, Zaltor. As you (may have) found out new users are restricted from posting URLs until they have made 5 posts.
    Thanks, and thanks for helping out with the links.

    Originally Posted by Kravvitz
    So what have you tried changing to correct the position?
    Well, I've been changing the numbers roughly to see what's happening and yes I can reposition the bubble and it's tail, but there are problems I don't think you can solve without adding more stuff to the CSS. And I don't know enough about CSS to know what I'm supposed to do... which brings me to the CSS Help forum

    For example, if I move the bubble down a bit (so the bullet with the question mark is visible above the bubble), this will work fine with the bubbles that contain only three lines of text, but the bubbles with more content will be positioned wrong. Is there a way to make it work with different lengths of text?
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    To make the bubble to appear below the icon, use the "top" property instead of the "bottom" property to control its vertical position.

    By the way, that technique does not work in IE7 and older.

    Comments on this post

    • Zaltor agrees
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by Kravvitz
    To make the bubble to appear below the icon, use the "top" property instead of the "bottom" property to control its vertical position.
    Simple as that - great, many thanks

    Originally Posted by Kravvitz
    By the way, that technique does not work in IE7 and older.
    OK. Seems IE7 has a less than 0,7% user base today so I'm willing to live with that.

IMN logo majestic logo threadwatch logo seochat tools logo