Tooltips using only CSS

Question

I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.

Gmail's tooltips

The above image is what I am trying to get at. I've tried keeping the width:auto but it's not working either.

Think it may not be possible with just CSS like this. You would need to know the width of the tooltip or be able to position the tooltip area relative to the triangle. Unrelated, but amazingly similar to this: hint.css — robooneus
– robooneus, Commented Jul 24, 2013 at 15:07

score 3 · Accepted Answer · 2013-07-30 07:16:32Z

3

body
{overflow-x:hidden;}

div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}

a
{position:relative;white-space:nowrap;}

a > span.tooltip
{
    position: absolute;
    white-space: normal;
    width: 100%;
    top: 130%;
    left: 0;
}

a > span.tooltip > span
{
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    left: -500%;
    width: 1100%;
}

a > span.tooltip > span > span
{
    display: inline-block;
    background: black;
    border-radius: 4px;
    padding: 10px;
    color: white;
    max-width: 300px;
}

DEMO: http://jsfiddle.net/b2Yqf/

works on msie 7 8 9 10, firefox, chrome

not what you might want... since markup is made with three nested <span>s... but YES. it could be done!

edited Jul 30, 2013 at 7:16

answered Jul 30, 2013 at 6:26

user652649

Sign up to request clarification or add additional context in comments.

Comments

Alexander Varwijk · Accepted Answer · 2013-07-24 15:23:54Z

1

The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by @robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.

EDIT1: Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.

edited Jul 24, 2013 at 15:23

answered Jul 24, 2013 at 15:17

Alexander Varwijk

2,09218 silver badges21 bronze badges

4 Comments

robooneus Over a year ago

The images are definitely pulled from gmail. I pulled it up to see how that was being done, but it is not all CSS. As said, if he knew the width of the tooltip element, he could just use a negative margin equal to half the width to put it in the middle. But with auto width, I don't think it will work.

Anuj Kaithwas Over a year ago

the images are from Gmail, you can check it out, it's below the search box. I just used firebug and typed "b".

Anuj Kaithwas Over a year ago

@robooneus dl.dropboxusercontent.com/u/96798895/k.PNG this is what white-space:nowrap gives. The only thing that bugs is how to center the tooltip according to the links.

Alexander Varwijk Over a year ago

GMail only really centers the shortest words and it looks like there's some javascript attached there. Their longer tooltips aren't shortened either so I think it's not possible with just CSS.

robooneus · Accepted Answer · 2013-07-24 16:01:18Z

1

I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.

If you declare a width, you can simple position the tooltip with:

.tooltip:hover:after {
    width:100px; /* whatever you want */
    left:50%;
    margin-left:-50px; /* half the width */
}

EDIT

As @Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.

edited Jul 24, 2013 at 16:01

answered Jul 24, 2013 at 15:34

robooneus

1,3448 silver badges10 bronze badges

9 Comments

Anuj Kaithwas Over a year ago

margin:0px does the trick too, the arrow aligns exactly to the center of the "Tooltip" text. edited demo

Alexander Varwijk Over a year ago

It's actually 6px as your arrow is positioned at 50% of the word "Tooltip" and then pushed right by 6px due to the border. If you carefully scrutinize jsfiddle.net/mtxJw/8 you can see the slight difference.

robooneus Over a year ago

Yes, but since it is already 50%, you only want to move it back over by half its width. Unless the triangle width is actually 12px...

Alexander Varwijk Over a year ago

@AnujKaithwas You also changed the left to 40%, margin: 0 doesn't work.

robooneus Over a year ago

@AlexanderVarwijk Ah, you are right about moving it 6px... just checked and the triangle is actually 12px wide. For some reason I was thinking it was equilateral. check the width of .triangle (same thing as the pseudo element). I think we were arguing semantics :P

|

Collectives™ on Stack Overflow

Tooltips using only CSS

3 Answers 3

Comments

4 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related