Forum Moderators: not2easy
Here something that many of us are facing everyday, issues abt brousers bugs/compatibilities.
I did a very simple CSS that allow us to have a nice tooltip as a result, it works fine in Firefox, Safari and IE7, but there are problems with IE6 or at least one version that is pretty used from people which is (6.0.x).
Maybe some of you knows some problems with IE6 and the style I used to do this tooltip.
Any help will be appreciate a lot! thank you in advance.
Here the Style:
[codes]
a.tooltip span {
display:none;
padding:2px 3px;
cursor:help;
text-decoration: none;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#dae9ed;
border:2px dashed #fff0c4;
color:#086989;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
cursor:help;
z-index:9999;
}
[codes]
and following the HTML to see this style in action:
[codes]
<a id="a" class="tooltip" href="http://www.example.com">
<span>
<!-- here some HTML or simple text we want to show as a tooltip -->
<table width="325" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%">
HERE some content to show
</td>
</tr>
</table>
<!-- end tooltip content -->
</span>
Your link text
</a>
[codes]
Thank you in advance for any help!
[edited by: swa66 at 10:37 am (utc) on Nov. 21, 2008]
[edit reason] example.com is the one nobody will own [/edit]
Why don't you try to style it all with css and get rid of the table?
I saw few documentations and i understood that I would have problems in wrapping tables that are blocks in span.
But in the other hands, if I delete all the table and I put just some text, it will still not work in IE6.
Looking around it is like that there is some problem with the display:inline or block
and I even used the following fix where to hide the toolotip content I just move it out of the screen. But in this case it still work fine for FF and Safari, and this time, not at all with IE even the 7.
Here the complete code
[codes]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tooltip Compatibility</title>
<style type="text/css">
<!--
a.tooltip {
position: relative;
cursor: help;
}
a.tooltip span {
position: absolute;
left: -9999em;
padding: 2px 3px;
background:#dae9ed;
border:2px dashed #fff0c4;
color:#086989;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
a.tooltip:hover span, a.tooltip:focus span {
left: 20px; /*change this to wherever you really want it to sit, in relation to the anchor*/
}
-->
</style>
</head>
<body>
<a id="a" class="tooltip" href="#">Text to mouse hover...<span>
Thank you!
</span></a>
</body>
</html>
[/codes]
But -and that's the most important part- I've learned a few things.
I think the OP knows most of this, but for the rest:
You *need* position:absolute on the span as you have to get it out of the flow.
Now position absolute in most cases does position in reference to something.
In order to have that something be the <a>, we need to give it too some positioning. And in order to give positioning that doesn't change the location, nor move it out of the flow, we can use position:relative without adding any nudging (top, left, bottom and right move the object from it's initial spot).
More about that here: [w3.org...]
So combining the two allows us to position the span without it being part of the flow and without needing to rely on the initial position of the <span>.
Normally you expect the span to be where it would be without the position:absolute applied to it. But even the normally standards compliant ones had quite some trouble when I tried applying display: inline-block to it and seemed to disagree how to render it.
To hide it, and make it visible again there are a number of things you could try to change:
"display:none;" ; a position outside the viewport, or visibility:hidden
Now note that :hover doesn't require the UA to actually redraw all that much (most do).
I've reread the standard a few times in the mean time, but ... well a perfect solution is still far away.
The thing is :hover is kinda limited: we can't position relative to the pointer position, nor do we have a delay that you need to stay hovering before it kicks in. So maybe a scripted solution will in the end be better regardless of what we achieve here.
Tricky bits to get done:
if the <a> wraps a line you can hover over the second line, where do you wan tit to show up (well the part you're hovering but since we don't known which, we'll have no choice in where it goes.
Similarly we want to keep the pop-up inside the visible area and not grow too long even if it's long. (sort of a max-width)
Fixing it for IE6: I'd suggest to use IE7.js as none of the things I've tried with pure CSS did help in any way or shape in this case.
Getting it all right: I'm nowhere close to it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Tooltip Compatibility</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
.tooltip {
position: relative;
}
.tooltip span {
visibility:hidden;
position:absolute;
top:2px;
left:-2px;
max-width: 100px;
padding: 2px 3px;
background-color:#dae9ed;
border:2px dashed #fff0c4;
color:#086989;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
.tooltip:hover span {
visibility:visible;
z-index:999;
}
body {
margin: 0 50px;
}
</style>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<p>before<a class="tooltip" href="#">Text to mouse hover...<span>Thank
you!</span></a> after</p>
<p>long before<a class="tooltip" href="#">Text to mouse hover...
<span>Thank you very much and see you soon!</span></a> long after</p>
<p style="text-align:right;">before<a class="tooltip" href="#">Text
to mouse hover...<span>Thank you! very much and see you soon</span></a></p>
<p>wrap
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
<a class="tooltip" href="#">Text to mouse hover...<span>Thank you!</span></a>
</p>
</body>
</html>
Works reasonably well in Firefox and Opera (with obvious limitations, as said up front).
Fails in safari with text decoration still being applied to the span.
Fails in IE7 and IE6 with the z-index no winning out on the :hover.
Anyway, no success, but I hope some of it might inspire somebody else on it.
I simply appreciate what you did, and thanx to spend some of your time in trying to find a nice solution! really thanx!
I will post here some more version done, and now seems to work fine in FF, Safari and IE7 is ok, I didin't had a chance to test it on IE6, but I think that it should work.
Following the code "I though it was to be easyer too :)":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tooltip Compatibility</title>
<style type="text/css">
<!--
a.tooltip span {
position : absolute;
display : none;
left : 20px;
padding : 2px 3px;
background : #dae9ed;
border : 2px dashed #fff0c4;
color : #086989;
font : 12px Verdana, Arial, Helvetica, sans-serif;
}a.tooltip:hover {
direction : rtl;
position : relative;
cursor : help;
}
a.tooltip:hover span, a.tooltip:focus span {
display : block;
}
-->
</style>
</head>
<body>
<a id="a" class="tooltip" href="#">Mouse hover...<span>
<table width="150">
<tr>
<td>
Ecco il nostro tooltip!
</td>
</tr>
<tr>
<td bgcolor="#F5F5F5">
Ecco il nostro tooltip!
</td>
</tr>
</table>
</span></a>
<br>
<a id="a" class="tooltip" href="#">Mouse hover...<span>
<table width="150">
<tr>
<td>
Ecco il nostro tooltip!
</td>
</tr>
</table>
</span></a>
<br><br>
<a id="a" class="tooltip" href="#">Mouse hover...<span>
<table width="150">
<tr>
<td>
Ecco il nostro tooltip!
</td>
</tr>
</table>
</span></a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Tooltip</title>
<style type="text/css">
.tt {position:relative;}
.tt:hover {font-size:100%}
.tt span {display:none}
.tt:hover span {
display:block;
position:absolute;
top:1.3em;
left:20px;
background-color:#dae9ed;
color:#086989;
border:2px dashed #fff0c4;
padding:2px 3px;
width:325px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
cursor:help;
z-index:9999;
}
</style>
</head>
<body>
Some text <a href="glossary_hello.html" class="tt">tooltip target<span>tooltip text</span></a> some more text.<br>
Blah blah blah blah.
</body>
</html>
Thank you also for your contribution.
For something really extensive, search Walter Zorn, tooltip.
Like swa66, I'd encourage you to validate your html and css. That's especially so when trying a technique that browsers have difficulty with as otherwise you begin to code for issues created entirely by poorly formed code ;)
I'd also encourage you not to use nested tables - despite the effort you must have gone to create them, they are just not required - as vincevincevince's solution demonstrates. This can also be done without ie7.js although dealing with Opera's quirks forces use of conditional comments for ie. I also suggest avoiding
display:noneThis is one of two solutions I played with, and has been tested in Opera9.2&9.6, winSafari, ie6&7, Firefox2&3, also work as html and xhtml strict, and xhtml transitional. The solution is much the same as vincevincevince, however includes some differences and perhaps the comments will help understand why the original examples did not work as designed, and why a little more code is required for this to be robust enought to easily transfer to complex layouts.
The challenge is the troubles caused by Opera when the containing block is centred using margin:?em auto, and when position relative is applied to the span (to allow the hover to be positioned relative to the link instead of relative to the containing box or viewport). These are very common techniques, but cause Opera to create a horizontal scrollbar.
This would be much simplified if the layout does not require centering. However, if it does, the scrollbar issue cannot be corrected by, for example, setting overflow-y to allow for vertical scrolling if the content extends longer than the viewport because opera does not yet understand that directive (although that solution works for the other browsers tested). For even more fun, Opera 9.5 and 9.2 have display variations, and Opera 9.2 is really enthusiastic about clipping the hovered tip - and solutions create issues for conforming browers and also for ie.
In result, this is not that hard - but the "best"/most robust/most easily transferred solution still depends on what other elements are on the page, and what other layout considerations limit options. As stated, this would be very easy if auto is not applied to margins to centre elements, and/or if Opera deficiencies were tolerated by accepting a horizontal scrollbar given the lower number of Opera users (who must be very used to seeing it by now), which would mean less conditional comments required for ie.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Css Tooltips</title>
<style type="text/css">
/* global reset */
* {
margin:0;
padding:0;
}p {
/* styles for the example */
width:400px;
border: 2px solid #dcdcdc ;
margin:2em auto;
padding:2em;
font-family:verdana, helvetica, arial, sans-serif;
font-size:0.8em;
line-height:1.2em;
}.tooltip {
text-decoration:none;
font-weight:bold;
color:#333;
cursor:help; /* Opera requires cursor to be set here, but this prevents spans from changing visibility on hover for ie6 - see conditional comment*/
position:static; /*position relative here causes scroll bars in Opera.,plus positioning issues with the hover for ff, winSafari*/
}.tooltip span {
visibility:hidden;
position:fixed;
font-size:0.8em;
}.tooltip:hover span {
visibility:visible;
position:fixed; /* to right of link. Using top/left will position relative to screen so use margin instead*/
margin-top:1em;
width: 10em; /* Avoid height else Opera will clip */
z-index:99; /* tip will be displayed without transparency and above other links and spans for all but ie*/
padding: 1em;
background-color:#eee;
border: 1px solid #dcdcdc;
color:#333;
text-decoration: none;
}
</style>
<!--[if lte IE 6 ]>
<style type="text/css">
.tooltip {
cursor:default; /*turn off cursor applied by above css*/.
position:relative;
}
.tooltip span {
position:absolute;
top:0;
left:0;
}
.tooltip:hover span {
position:absolute;
top:2em;
}
a.tooltip:hover {
cursor:help;/*.a cursor must be set for ie6 (including cursor:default)*/
z-index:99; /*set here because ie needs a.tooltip:hover, but opera ignores it */
}
</style>
<![endif]--></head>
<body>
<h1>Uses position:static and more ie conditionals</h1>
<p class="tips">Investigationes <a class="tooltip" href="#">Tool Tip<span>My tooltip text</span></a> lectores Ut wisi enim ad minim veniam, quis consequat.legere me ii <a class="tooltip" href="#">Multi Word Wrapping Tool Tip Link<span>My tooltip for wrapped links</span></a>. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.mazim <a class="tooltip" href="#">Tool Tip<span>My tooltip text for more and more and more more and more text End</span></a> placerat facer possim assum.</p>
</body>
</html>
