CSS tooltip: how to auto center over element? I'm following this guys code. I want the tooltip widthless like his example code. But his code doesn't center. Each tooltip will be different length of text. If I give it a width then centering is easy. But how to without? Thanks.

Thanks Paul you rock! I'll take the all browser one. I am actually going to get rid of the title and just use a span because otherwise I quickly found I can't get rid of the default title. Looks like the process would be somewhat the same huh? Or can that code be trimmed then? I took a good year off web stuff. I'm a bit rusty. Thanks Paul.

PaulOB
—
2012-10-26T21:08:47Z —
#5

Hi Eric,

You'd need another element such as a span if you aren't using the title attribute text.

If you needed to support ie7 and under then you'd need to give them a width and use display block instead of display:table (and a:hover{visibility:visible} to fix the ie7- bug )

PicnicTutorials
—
2012-10-26T21:22:03Z —
#6

Thanks a ton Paul. Nice job. You just posted the only css centered tooltip solution on the web. That is unless my google skills are rusty too. Silly me I thought it would be easier without the title. I'll go play with this...

dresden_phoenix
—
2012-10-27T06:25:55Z —
#7

Eric and Paul nice to see you both around here again !

I saw Eric's post earlier this evening and had come up with a solution similar to Paul's, but was too dissatisfied with the fact that I needed an extra, empty, element. :/.

The one advantage of my solution is that it's fluid, it wraps, and it doesn't It doesn't cause scroll bars.

Am still satisfied that it needed that extra element tho. if I figure something else out I will make an additional post.

PicnicTutorials
—
2012-10-27T07:28:09Z —
#8

Nice job desden_phoenix. that looks good too. Unfortunately it seems I have to move away from the title method because I can't get any JS'ers to give me a solution to remove the default title but allow css access to it. So the span method is the best prob now. The big jquery tool tips (5kb+ guys) remove it and then use it. So I know it's possible. I was hopeing to just use a small script. But no luck. I was trying to move away from the span because it could be considered wrong in the eyes of the search engines. For something as insignificant as a tooltip I can't justify an additional script. So css only it is.

dresden_phoenix
—
2012-10-27T08:22:52Z —
#9

remove the default title but allow css access to it

In my method I put it on <I> tag; remove the title from the anchor so you dont have to put on the tag you mean?

You could use js or jQ with the following logic:

1) select ALL .tooltips2) store the attr in a variable3) select each tool tip's <I>'s, $(this, 'i') in jQ, and set that attribute to the variable's value4) then set that sames tooltip's tittle attribute to ='' ( which essentially removes it!)

PaulOB
—
2012-10-27T09:22:56Z —
#10

Eric and Paul nice to see you both around here again !

Thanks Ray, I didn't expect to be off for 5 weeks with a broken phone line but its back working now although I have 5 weeks work to catch up on now :(.

Good job on the tooltip Ray but unless I'm mistaken the tooltip doesn't center if the tooltip is longer than the link text it sits in. It just starts from the left of the link.

The scrollbar on hover is the drawback to my method above (and I didn't actually notice it) but it can be fixed with an alternative method shown below.

I was hopeing to just use a small script.

If you are already using jquery then it would be quite easy to remove the title attribute and place it and the html inside the anchor.

If you wanted to use your original version using a width then just swap the title attribute text into a data attribute (html5) and remove the tooltip.

PicnicTutorials
—
2012-10-27T11:37:59Z —
#11

Oh man. My mistake. I wasn't looking correctly or testing apparently The browser doesn't use the default title on the "i" or "b" because its an empty tag. Ok then the title one can be used. Duh. Wow so many methods to choose from. I'm like a kid at a candy store - I cant decide. 1) could just put a width on it - simple and easy. 2) Put it in the span tag. 3) put it in the title of an empty element. 4) or drsden, or Pauls produces horizontal scroll bars ones. 5) or the jquery method Paul just posted. Hmmm? I'll have to think on this. What do you think?

If you don't want to use jquery then I'm sure the other Paul in the JS forum could convert that snippet into vanilla js for you.

PicnicTutorials
—
2012-10-27T12:14:43Z —
#13

dresden. Actually you do get the default title if you hover over the tooltip popup. Probably a non issue just noticed. Pauls dont seem to do that.

PicnicTutorials
—
2012-10-27T12:18:51Z —
#14

cool. Paul did you miss my edits in my above post. The 2 questions.

PaulOB
—
2012-10-27T13:07:04Z —
#15

..also. Paul testing here. I see scrollbars on both. You guys are just saying if it goes wider than the viewport there are horizontal scroll bars right? I see that on both. What am I missing?

You will only get scrollbars on mine when the tooltip is near the edge of the right window. I don't see a way to stop that without using overflow:hidden on a parent. (Note that Rays method only works for tooltips that are shorter than the link that triggers it - at least that's what I saw when i tested earlier.)

And what do you think... do search engines see the generated html or the non generated?

They shouldn't see any of the generated content so my last method should be best for all users.

PaulOB
—
2012-10-27T13:34:52Z —
#16

If you wanted to just hide the tooltip (using your original method but with a width) then you could swap the text from the title attribute into a data attribute (html5) with one lijne of jquery.

arg. What am I missing? I'm trying to add css3 transitions. Its not working. Which ever rule on whichever rule. Im using this one... As a side note this works in ie7 out of the box. No extra hacks needed it seems.

Also. Why does it need the margin left -8px to center? I'm having trouble visualizing this code. Is it because of the padding or borders? Basically what is that negative margin eating up. Thank you!

PaulOB
—
2012-10-27T19:04:39Z —
#19

Hi Eric,

you can't really do transitions on display:none but rather on some other change in appearance. You can set the elements opacity to zero and then raise it on hover to get a fade effect bit you will need to move the element out of the way rather than using display:none.

The margin-left:-8ps should be margin-left:-6px because that would be half the width of the 12 border arrow. Left:50% moves the left edge of the border by 50% so to centre it you also need to move it by half it's width.

unless I'm mistaken the tooltip doesn't center if the tooltip is longer than the link text it sits in. It just starts from the left of the link.

It's not a bug, it's a feature! to' fix' this remove the white-space:nowrap; declaration from my code. At which point i would recomend that you have the tooltip appear below the link rather than above, or use neg margins on the :before pseudo element (eg.: margin:0 -100%) to give it horizontal breathing room.

Eric.. Ah I see what you mean, the title does show as a tool tip tool tip..lol.

tool i:before { content:"";}1) select ALL .tooltips2) store the attr in a variable3) select each tool tip's <I>'s, $(this, 'i') in jQ, and set that TEXT() to the value in the variable. 4) then set that sames tooltip's tittle attribute to ='' ( which essentially removes it!)

ADVANTAGES:1) your title remains in the A tag, for when everything is off2) if they dont have js on.. well minor drawback thatthey see the default title...:/3) if they have j/s & CSS then everything works 100%!