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.
Yes with a width its easy to do but not so easy fluid.
You can do it for Firefox only without changing the markup like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.tooltip {
display:inline;
position:relative
}
.tooltip:hover { text-decoration:none }
.tooltip:hover:after {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:table;
left:-1000px;
right:-1000px;
margin:auto;
padding:5px 15px;
position:absolute;
white-space:nowrap;
z-index:98;
text-align:center;
}
.tooltip:hover:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:50%;
margin-left:-3px;
position:absolute;
z-index:99
}
</style>
</head>
<body>
</body>
<h1>Firefox only</h1>
<p>This is some text to testing<a href="#" title="Sample tooltip with much longer text" class="tooltip">Link</a>and some more text and some more text and some more text and some<a href="#" title="Sample tooltip" class="tooltip">Link</a>more text and some more text and some more text text and some more text and some<a href="#" title="Sample" class="tooltip">Link</a>more text and some more text and some more text</p>
</body>
</html>
Other browsers won’t play ball and you would need to add an extra element and move the tooltip which kind of defeats the purpose a bit.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.tooltip {
display:inline-block;
position:relative
}
.tooltip:hover { text-decoration:none }
.tooltip b {
bottom:18px;
margin:auto;
position:absolute;
display:block;
z-index:98;
text-align:center;
left:-1000px;
right:-1000px;
}
.tooltip:hover b:after {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
color:#fff;
content:attr(title);
display:table;
margin:auto;
padding:5px 15px;
white-space:nowrap;
z-index:98;
text-align:center;
}
.tooltip:hover b:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:-6px;
content:"";
display:block;
left:50%;
margin-left:-3px;
position:absolute;
z-index:99
}
</style>
</head>
<body>
</body>
<p><a href="#">test</a></p>
<p>This is some text to testing<a href="#" class="tooltip">Link<b title="Sample tooltip with much longer text"></b></a>and some more text and some more text and some more text and some<a href="#" class="tooltip">Link<b title="Sample tooltip"></b></a>more text and some more text and some more text text and some more text and some<a href="#" class="tooltip">Link<b title="Sample"></b></a>more text and some more text and some more text</p>
</body>
</html>
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.
You’d need another element such as a span if you aren’t using the title attribute text.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.tooltip {
display:inline-block;
position:relative
}
.tooltip:hover { text-decoration:none }
.tooltip span {
bottom:18px;
margin:auto;
position:absolute;
display:block;
z-index:98;
text-align:center;
left:-1000px;
right:-1000px;
}
.tooltip b {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
color:#fff;
display:none;
margin:auto;
padding:5px 15px;
white-space:nowrap;
z-index:98;
text-align:center;
}
.tooltip:hover b { display:table; }
.tooltip:hover b:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:-6px;
content:"";
display:block;
left:50%;
margin-left:-3px;
position:absolute;
z-index:99
}
</style>
</head>
<body>
<h1>IE8+ only</h1>
<p>This is some text to testing <a href="#" class="tooltip">Link<span><b> Sample tooltip with much longer text</b></span></a> and some more text and some more text and some more text and some <a href="#" class="tooltip"><span><b>Sample tooltip</b></span>Link</a> more text and some more text and some more text text and some more text and some <a href="#" class="tooltip">Link<span><b>Sample</b></span></a> more text and some more text and some more text</p>
</body>
</html>
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 )
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…
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. :/.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.tool {position: relative; }
.tool i {position: absolute; width:100%; left:-99999em; text-align: center; }
.tool i:before { content:attr(title); left:-9999em; background: pink; display:inline-block; padding:.25em; border-radius:7px; white-space: nowrap}
.tool:hover i {left:0;bottom:100% }
/** for the arrow shape **/
.tool i:after {
border: 6px solid transparent;
border-top-color:pink;
top: 100%;
content:"";
display:block;
left:-99999em;
margin-left:-3px;
position:absolute;
z-index:100
}
.tool:hover i:after { left:50%;}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt <a href="#" class='tool'>mollit anim id est .Lorem ipsum dolor sit amet<i title='ray & roni'></i></a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.lorem
</div>
</body>
</html>
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.
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.
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.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.tooltip {
display:inline-block;
position:relative
}
.tooltip:hover { text-decoration:none }
.tooltip span {
bottom:18px;
margin:auto;
position:absolute;
display:block;
z-index:98;
text-align:center;
left:100%;
margin-left:-50%
}
.tooltip b {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
color:#fff;
display:none;
margin:auto;
padding:5px 15px;
white-space:nowrap;
z-index:98;
text-align:center;
position:relative;
left:-50%;
}
.tooltip:hover b { display:inline-block;}
.tooltip:hover b:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:-6px;
content:"";
display:block;
left:50%;
margin-left:-3px;
position:absolute;
z-index:99
}
</style>
</head>
<body>
<h1>IE7+ only</h1>
<div class="outer">
<p>This is some text to testing <a href="#" title="Sample tooltip with much longer text" class="tooltip"> A link </a> and some more text and some more text and some more text and some <a href="#" title="Sample tooltip" class="tooltip">Link</a> more text and some more text and some more text text and some more text and some <a href="#" title="Tooltext" class="tooltip"> link text</a> more text and some more text and some more text</p>
</div>
<script type="text/javascript">
$('.tooltip').each(function() {
$(this).append('<span><b>' + $(this).attr("title") + '</b></span>').removeAttr("title");
});
</script>
</body>
</html>
The jquery version should work in IE7 with no problem also.
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.
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?
…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?
And what do you think… do search engines see the generated html or the non generated?
I’d do it like I said above but re-instate the original routine width a width for when js was disabled and therefore just enhance with js.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.tooltip {
display:inline-block;
position:relative
}
.tooltip:hover { text-decoration:none }
.tooltip span {
bottom:18px;
margin:auto;
position:absolute;
display:block;
z-index:98;
text-align:center;
left:100%;
margin-left:-50%
}
.tooltip b {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
color:#fff;
display:none;
margin:auto;
padding:5px 15px;
white-space:nowrap;
z-index:98;
text-align:center;
position:relative;
left:-50%;
}
.tooltip:hover b { display:inline-block; }
.tooltip:hover b:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:-6px;
content:"";
display:block;
left:50%;
margin-left:-3px;
position:absolute;
z-index:99
}
/* when js is off */
.jsoff:hover:after {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(title);
display:block;
left:50%;
width:10em;
margin-left:-5em;
padding:5px 15px;
position:absolute;
z-index:98;
text-align:center;
}
.jsoff:hover:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:50%;
margin-left:-3px;
position:absolute;
z-index:99
}
</style>
</head>
<body>
<h1>IE7+ only</h1>
<div class="outer">
<p>This is some text to testing <a href="#" title="Sample tooltip with much longer text" class="tooltip jsoff"> A link </a> and some more text and some more text and some more text and some <a href="#" title="Sample tooltip" class="tooltip jsoff">Link</a> more text and some more text and some more text text and some more text and some <a href="#" title="Tooltext" class="tooltip jsoff"> link text</a> more text and some more text and some more text</p>
</div>
<script type="text/javascript">
$('.tooltip').each(function() {
$(this).append('<span><b>' + $(this).attr("title") + '</b></span>').removeAttr("title").removeClass('jsoff');
});
</script>
</body>
</html>
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.
…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.
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<style type="text/css">
.tooltip {
display:inline-block;
position:relative
}
.tooltip:hover { text-decoration:none }
/* when js is off */
.tooltip:hover:after {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
bottom:18px;
color:#fff;
content:attr(data);
display:block;
left:50%;
width:10em;
margin-left:-5em;
padding:5px 15px;
position:absolute;
z-index:98;
text-align:center;
}
.jsoff:hover:after { content:attr(title); }
.tooltip:hover:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:12px;
content:"";
display:block;
left:50%;
margin-left:-3px;
position:absolute;
z-index:99
}
</style>
</head>
<body>
<h1>IE7+ only</h1>
<div class="outer">
<p>This is some text to testing <a href="#" title="Sample tooltip with much longer text" class="tooltip jsoff"> A link </a> and some more text and some more text and some more text and some <a href="#" title="Sample tooltip" class="tooltip jsoff">Link</a> more text and some more text and some more text text and some more text and some <a href="#" title="Tooltext" class="tooltip jsoff"> link text</a> more text and some more text and some more text</p>
</div>
<script type="text/javascript">
$('.tooltip').each(function() {
$(this).attr("data", $(this).attr("title")).removeAttr("title").removeClass('jsoff');
});
</script>
</body>
</html>
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tooltip {
display:inline-block;
position:relative;
}
.tooltip:hover { text-decoration:none }
.tooltip span {
bottom:24px;
margin:auto;
position:absolute;
display:block;
z-index:98;
text-align:center;
left:100%;
margin-left:-50%;
}
.tooltip b {
background:#111;
background:rgba(0,0,0,.8);
border-radius:5px;
color:#fff;
display:none;
margin:auto;
padding:5px 15px;
white-space:nowrap;
z-index:98;
text-align:center;
position:relative;
left:-50%;
}
.tooltip:hover b { display:inline-block;}
.tooltip:hover b:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:-6px;
content:"";
display:block;
left:50%;
margin-left:-8px;
position:absolute;
z-index:99;
}
</style>
</head>
<body>
<h1>IE7+ only</h1>
<div class="outer">
<p>This is some text to testing <a href="#" class="tooltip"> A link <span><b> Sample tooltip with much longer text</b></span></a> and some more text and some more text and some more text and some <a href="#" class="tooltip">Link <span><b>longer text</b></span></a> more text and some more text and some more text text and some more text and some <a href="#" class="tooltip">link text <span><b> Sample tooltip with much longer text</b></span></a> more text and some more text and some more text</p>
</div>
</body>
</html>
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!
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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tooltip {
display:inline-block;
position:relative;
}
.tooltip:hover { text-decoration:none }
.tooltip span {
bottom:24px;
margin:auto;
position:absolute;
display:block;
z-index:98;
text-align:center;
left:-999em;
margin-left:-50%;
}
.tooltip:hover span{left:100%}
.tooltip b {
background:#111;
background:rgba(0,0,0,0.0);
border-radius:5px;
color:#fff;
display:inline-block;
margin:auto;
padding:5px 15px;
white-space:nowrap;
z-index:98;
text-align:center;
position:relative;
left:-50%;
-webkit-transition: all 1000ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 1000ms ease;
-o-transition: all 1000ms ease;
transition: all 1000ms ease;
}
.tooltip:hover b {
background:rgba(0,0,0,.8);
}
.tooltip:hover b:before {
border:solid;
border-color:#111 transparent;
border-width:6px 6px 0 6px;
bottom:-6px;
content:"";
display:block;
left:50%;
margin-left:-6px;
position:absolute;
z-index:99;
}
</style>
</head>
<body>
<h1>IE7+ only</h1>
<div class="outer">
<p>This is some text to testing <a href="#" class="tooltip"> A link <span><b> Sample tooltip with much longer text</b></span></a> and some more text and some more text and some more text and some <a href="#" class="tooltip">Link <span><b>longer text</b></span></a> more text and some more text and some more text text and some more text and some <a href="#" class="tooltip">link text <span><b> Sample tooltip with much longer text</b></span></a> more text and some more text and some more text</p>
</div>
</body>
</html>
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.
OK , well minor tweak then… IF PAUL hasn’t suggested this yet ( am prepping for Samhain so am distracted) :
tool i:before { content"";} /* THIS IS OPTIONAL!!!*/
tool i:before { content:“”;}
select ALL .tooltips
store the attr in a variable
select each tool tip’s <I>'s, $(this, ‘i’) in jQ, and set that TEXT() to the value in the variable.
then set that sames tooltip’s tittle attribute to =‘’ ( which essentially removes it!)
ADVANTAGES:
your title remains in the A tag, for when everything is off
if they dont have js on… well minor drawback thatthey see the default title…
if they have j/s & CSS then everything works 100%!
