Hi - reasonably new CSS coder here! Been learning & coding for 3 months now and almost have my new site ready to go EXCEPT!!! Can anyone tell me what is goning on in Opera (9.51) with this tooltip technique? I am viewing it on a XP SP2 machine and a Win2000 machine with similar problem. http://home.roadrunner.com/~nlecompte/test.html It appears to function as expected until you scroll to the bottom of the page and click anywhere in empty space - sometimes I have to do it a couple times - then go back up and hover on the links. Now the tooltip pops up in a different place! The original site I found it on does not appear to have this quirk, but all I did was copy & paste the source code on of the page to create the test page. The only thing I see different is the Navigation section at the top of the page due to missing javascript. http://psacake.com/web/jl.asp It seems to be a problem using visibility or display to create the effect. I have this problem - only much more pronounced on a tooltip I coded from scratch using the same general technique. I have been searching online for a couple hours now and don't see any mention of Opera bugs concerning this. I am stumped - am I the only one that ever noticed this problem?
Hmmm, I get the bug too with Linux and Opera 9.27 (or whatever it is I had before 9.5 came out). Now I've been using absolutley positioned tooltips for a while now and haven't run across it. I did find some info on positioning bugs... I rememeber one from SitePoint about position: relative and floats, though that's not this one (didn't find that one on google but did find this): http://www.highdots.com/forums/cascading-style-sheets/opera-9-5-bug-nested-257529.html The page is rather unhelpful in that there's no solution given. However, your a's aren't positioned absolutely-- so this shouldn't be the bug either. By the way, the bug DOES appear on the original page. Do you have a large screen? I didn't see it at first either because there's less content on the original page, so no scrollbar. Making the browser smaller so I could move those tooltip holders up to the top of the screen made exactly the same bug. I have some tooltips on a rather complicated page of mine and I don't get the bug on my Opera 9.27... http://stommepoes.nl/Homeselling/secondhome/beschikbaar.html css: same path, default.css I'm betting the poor doctype (yours is incomplete) and the original's crappy code may be influencing it... see, the a's aren't in a box seperate from their sibling, the table (and using a table for a single header and then another td for spacing... atrocious), so you have anonymous inline boxes inside whichever div is ultimately the parent. So first, get a better doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>... etc and then try cleaning up the code (use appropriate parents and things) and maybe lastly remove the z-index junk. I can't figure out what the guy was using z-index for. Absolutely positioned things always sit above relative or static positioned things by default. Only use z-index when you have to get around the defaults. It might have something to do with an inline holding something else declared a block too possibly (not sure)-- I think I've always made my a's blocks too, but I don't remember... other notes, when setting something to position: absolute, no matter if it was inline or block before, it's now a block (just like what happens when floating something) so display: block is never needed on an abso-po'd thing. I don't see the bug on Eric's original page: http://meyerweb.com/eric/css/edge/popups/demo.html so I'm wondering if this is simply a good code issue rather than a real bug (although the absolutely positioned child and parent inside a relative grandparent is a real bug, it seems, and likely can be walked around in some fashion). Anyway, rework the code and see if it makes a difference. Here's another tooltip trick for you: http://stommepoes.nl/Menus/maphover.html and there are the links to Eric's and Mike's pages. Mike's demo is more complicated because of the images I think, but that's okay. *edit, duh, reread your post-- there may be a bug with display for showing and hiding the spans, but since that fux0rs with screen readers anyway, my methods are always moved off to the side by a bazillion px and moved back onscreen on :hover. So maybe you just need to set a width on the spans? There is an OPera bug to do with setting widths on things positioned absolutely and set off-screen-- I've seen the effects of this once, where the hovered things appear sometimes but flicker badly-- not your bug, but possibly related? *edit2, I think I know why the guy has some of the z-index declarations-- he may have been trying to trigger IE6 into showing the hovers. A seperate hover declaration does this, and doing something like setting z-index, or setting a background colour (actually, I've heard you can even just say foo: bar helps IE6 show the tooltip too (it won't otherwise). I usually use thing { styles; } thing:hover { visibility: visible; /*cause this doesn't change anything in any browsers, so completely safe... this is NOT to show something which is hidden*/ } thing:hover { general hover styles here; }
Thanks for the suggestions - I'll work on it some more. I am actually using different code but have the same problem occurring, plus an additonal one where only a portion of the tooltip is visible. Thought I should tackle one at a time and since I found other code online that exhibited this problem, this is where I started. Unfortunately, I have a job and household and this learning/coding thing is spare time. Ha Ha! On my own page there are 2 alternate locations the tool tips show up at and it seems to depend on where on the page I am clicking. It makes me think a change in focas on the page is causing Opera to see a different parent to offset from. BUT I only have one element as position relative and then the tooptip as position absolute. The only other possible parent would be the default, so where would my 2nd alternate location be coming from?!? All very mysterious to me and I just don't have enough experience with this stuff. I will take time this evening to think through your suggestions and see how they might reflect on my own coding. Rework things a bit etc.. I like the idea of using my own code and working it out myself (because I created it from scratch, all on my own as part of the learning process) instead of borrowing someone else's code. And it seems to work just fine in ie6/7, ff2, just not in Opera - I am trying to create a site accessible to anyone and cover all my bases like a good little coder should. If I am still having problems - I will put my own code up. Always good to have another set of eyes check it. Oh yes - my CSS and XHTML transitional does validate.
I found without the z-index on hover, the tooltip apears behind other a element text that lies within the border of the displayed tooltip. I was having that problem (ie6/7 ff2 etc) and tried specifying a z-index on the hover span with no luck. Never though to put it on the hover alone - just tried it in my own code and that did the trick - with the added bonus that it solved the other problem I was having in Opera - where only portions of the tooltip were being displayed on hover. I thought it probably had to do with stacking, but no time to work on it. SO - I did accomplished something yesterday! In my own code I am using visibilty instead of display to cause the tip to appear on hover. Also using the extra visibilty hack to get ie6 to acknowledge the hover. My styling is of course different than Eric's. Yes, I am establishing a width for the hover span. I'm not following you on this one --- "the absolutely positioned child and parent inside a relative grandparent is a real bug" - I see only one absolutely positioned thing "a.info:hover span" [the child] and only one relatively positioned thing "a.info" [the parent]. The purpose of the test page is to show someone else's tooltip using hover span within the a element exhibiting the same problem I am seeing in my code. I should have checked all the code on that page before using it to demonstrate my problem. Sorry if I wasted anyone's time. I stripped everything unrelated and cleaned the code on the test page and made sure both the html and css will W3C validate. We still have wandering tooltips in Opera. You don't even have to click anywhere on the page - just size the window so you have a vert. scroll bar and check items lower down on the page. Some appear to not be working but I think they are just appearing outside the viewport. If you get the window sized just right, you can see some of them appearing way above. I have reworked my code several times now and still end up with this problem in Opera, but working as expected in ie6/7, ff2. In the end my code is different enough from this test example to suggest this is not likely simple coding errors, but a possible bug or at least behavior of a yet to be understood nature. It seems to me - Opera must be confused who the parent is. But why does it change it's mind and what is triggering that change? I looked at Mike's map coding. It requires each a element to have a unique class, which is impractical for my needs. The other thing I think I am seeing is that your site, Mike's and Eric's home page all have the tooltip poping up at the same location on the page, which also doesn't work for me. I need a tooltip that pops up near the link text and I could have a large number of them on the same page. My site content is primarily text and the subject matter is such that definitions/explainations will be very useful for novice visitors. My intent is to have a definition popup when you hover on certain words throughout the site. Would appreciate additional input on the subject or confirmation that others are seeing (or not seeing!) this problem with their code in Opera. I hate to give up, but I just don't have time to work this out on my own. Need to move forward and I guess declare the site to be "not working" for Opera users.
Sorry I haven't been able to get back to this-- I've been in Copenhagen the last week. Came back with a bunch of projects too : ) I didn't mean that you had that bug, but only that I was certain that that was a Opera bug. The rest of the problems I did not think were actual bugs. Hmmm, that's something I didn't consider... I've never needed tooltips to be right next to their anchors-- in every instance, they needed to be positioned relative to the anchors' parent container. I can try a goes-with-the-text version and see if I get opera to jump. There is another possiblity, if your definitions aren't very long. The title attribute might be the better solution here, for a page where you are using an acronym or abbreviation and want the full name to appear. <a href="blah" title="Cascading Style Sheets">CSS</a> As an example. I'll see if I get some time on Monday to recreate your style of tooltips (positioned relative to the link and not the container). I use CSS tooltips all the time, and would like to eliminate any possiblities of Opera having issues with it. -Poes
There are major issues in Opera when it comes to absolute positioning something on an inline level element. MOST of these problems come from trying to declare the 'top' position. The normal 'solution' is to not declare TOP and instead use margin to push it down - problem is that doesn't work in any gecko based browser prior to 1.9 (aka FF3). I had this come up a long time ago, and to make sure FF 2.x and other gecko browsers were supported while also supporting IE, I ended up using the (rarely mentioned) HTML:not([lang*=""]) gecko CSS hack. It is fixed in FF3 - but not everyone (see users of certain *nix distros who follow the 'free as in freedom' rubbish) is there yet for FF users. Try this: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Tooltip Test Page </title> <style type="text/css"> a.info { position:relative; z-index:24; text-decoration:none; color:#000; background:#CCC; } /* don't forget your active and focus states since the former is keyboard navigation in IE, the latter is "rest of world" */ a.info:active, a.info:focus, a.info:hover { z-index:99999; /* make DAMNED sure it's atop EVERYTHING */ background:#FF0; } a.info span { position:absolute; /* We will not use visibility:hidden or display:none as that's an accessability /FAIL/ - instead we'll move it offscreen. */ left:-2000em; /* since top positioning messes up in some browsers (Opera, IE 5.x) we will use margin to push it down into place */ width:15em; margin-top:2em; text-align: center; color:#000; background:#CFF; border:1px solid #0CF; } html:not([lang*=""]) a.info span { /* fix GECKO - if we send top to all, it screws up Opera and makes older versions of webkit leak memory like a steel sieve. Since Gecko is only engine that NEEDS this, send to it only. */ top:0em; } a.info:active span, a.info:focus span, a.info:hover span { left:2em; /* move it onscreen */ } </style> </head><body> <p> What is a tooltip? <a class="info" href="#">This is a tooltip<span>an aiding text that appears just when you roll on with the mouse</span></a>. The basic idea comes from Eric Meyer <a class="info" href="#null"><b>pure css popups</b><span>a very clever way to get dynamic effects on an html page without using javascript.</span></a> </p><p> My idea was to add <b>position:relative</b> to the link, in order to allow the <b>span</b> element inside to position absolutely respect the parent link. This code has been tested in Ie5.5, Opera7.11 and Mozilla 1.4 and works fine. Solved ie bug adding some z-index, but with the modifications done this technique will be buggy in Opera7.2 . </p><p> Now, lets have a look at the basic <a class="info" href="#null">css<span>cascade style sheets, the separation from content and presentation</span></a> code for the tooltip:<br /> <br /> What is a tooltip? <a class="info" href="#">This is a tooltip<span>an aiding text that appears just when you roll on with the mouse</span></a>. The basic idea comes from Eric Meyers <a class="info" href="#null"><b>pure css popups</b><span>a very clever way to get dynamic effects on an html page without using javascript.</span></a> </p><p> My idea was to add <b>position:relative</b> to the link, in order to allow the <b>span</b> element inside to position absolutely respect the parent link. This code has been tested in Ie5.5, Opera7.11 and Mozilla 1.4 and works fine. Solved ie bug adding some z-index, but with the modifications done this technique will be buggy in Opera7.2 . </p><p> Now, lets have a look at the basic <a class="info" href="#null">css<span>cascade style sheets, the separation from content and presentation</span></a> code for the tooltip:<br /> <br /> <br /> <br /> What is a tooltip? <a class="info" href="#">This is a tooltip<span>an aiding text that appears just when you roll on with the mouse</span></a>. The basic idea comes from Eric Meyer's <a class="info" href="#null"><b>pure css popups</b><span>a very clever way to get dynamic effects on an html page without using javascript.</span></a> </p><p> My idea was to add <b>position:relative</b> to the link, in order to allow the <b>span</b> element inside to position absolutely respect the parent link. This code has been tested in Ie5.5, Opera7.11 and Mozilla 1.4 and works fine. Solved ie bug adding some z-index, but with the modifications done this technique will be buggy in Opera7.2 . </p><p> Now, let's have a look at the basic <a class="info" href="#null">css<span>cascade style sheets, the separation from content and presentation</span></a> code for the tooltip:<br /> <br /> What is a tooltip? <a class="info" href="#">This is a tooltip<span>an aiding text that appears just when you roll on with the mouse</span></a>. The basic idea comes from Eric Meyer's <a class="info" href="#null"><b>pure css popups</b><span>a very clever way to get dynamic effects on an html page without using javascript.</span></a> </p><p> My idea was to add <b>position:relative</b> to the link, in order to allow the <b>span</b> element inside to position absolutely respect the parent link. This code has been tested in Ie5.5, Opera7.11 and Mozilla 1.4 and works fine. Solved ie bug adding some z-index, but with the modifications done this technique will be buggy in Opera7.2 . </p><p> Now, let's have a look at the basic <a class="info" href="#null">css<span>cascade style sheets, the separation from content and presentation</span></a> code for the tooltip:<br /> <br /> What is a tooltip? <a class="info" href="#">This is a tooltip<span>an aiding text that appears just when you roll on with the mouse</span></a>. The basic idea comes from Eric Meyer's <a class="info" href="#null"><b>pure css popups</b><span>a very clever way to get dynamic effects on an html page without using javascript.</span></a> </p><p> My idea was to add <b>position:relative</b> to the link, in order to allow the <b>span</b> element inside to position absolutely respect the parent link. This code has been tested in Ie5.5, Opera7.11 and Mozilla 1.4 and works fine. Solved ie bug adding some z-index, but with the modifications done this technique will be buggy in Opera7.2 . </p><p> Now, let's have a look at the basic <a class="info" href="#null">css<span>cascade style sheets, the separation from content and presentation</span></a> code for the tooltip:<br /> <br /> What is a tooltip? <a class="info" href="#">This is a tooltip<span>an aiding text that appears just when you roll on with the mouse</span></a>. The basic idea comes from Eric Meyer's <a class="info" href="#null"><b>pure css popups</b><span>a very clever way to get dynamic effects on an html page without using javascript.</span></a> </p><p> My idea was to add <b>position:relative</b> to the link, in order to allow the <b>span</b> element inside to position absolutely respect the parent link. This code has been tested in Ie5.5, Opera7.11 and Mozilla 1.4 and works fine. Solved ie bug adding some z-index, but with the modifications done this technique will be buggy in Opera7.2 . </p><p> Now, let's have a look at the basic <a class="info" href="#null">css<span>cascade style sheets, the separation from content and presentation</span></a> code for the tooltip:<br /> </p> </body></html> Code (markup): Should work... tested here in IE 5.5, 6 & 7, FF 2.0 & 3.0, Opera 9.27 and 9.52 daily, and Safari 3 all under windows XP x64. It's kind of wierd that TOP is the dealbreaker, even more interesting is that firefox 2/earlier mis-renders the position if you OMIT Top - are we having fun yet?
Opera loads much faster than FF, but the positioning is way off. I had to use Opera for a while when my OS was acting strange.
Thanks for the suggestions folks. The title attribute was ruled out weeks ago - too limiting and not handled consistantly across browsers. My organization does not want me to use hacks. We would rather stick to pure XHTML/CSS and pray that future browsers become more compliant. We really hate to drop Opera from the list of browsers we support, but we also feel the tooltips will be important for many visitors. We will be offering media stylesheets for handhelds, etc., and will most likely have to turn off the tooltips there. Unless someone can come up with a new way to accomplish the tooltip concept across modern browsers, we will have to suggest desktop Opera users turn off the stylesheet, if they find the tooltips anoying. Not a pretty solution to the problem, but our other options are no better.