CSS Tooltip - IE6 issues - Please help

Discussion in 'CSS' started by pablosdeg, Nov 21, 2008.

  1. #1
    Dear coders,

    I did a very simple CSS that allow us to have a nice tooltip as a result, it works fine in Firefox, Safari but IE NO WAY!.

    Before I use another method to hide the tooltip which is display:none / block but I aw in many forums that with IE<7 it gave problems and it was like that!

    So now I've been fixing in another way and everything again works fine with FF and Safari, but even with IE7 nothing!

    I would really appreciate some help, please! :)

    Thank you in advance and following the entire code of the testing page.


    
    <!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>
    
    HTML:
     
    pablosdeg, Nov 21, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hmmm, I answered this somewhere, but I don't remember if it was here or not.

    So anyway, again:

    IE might want a "trigger". Try adding a new, separate declaration for IE which just makes a "trigger" on the :hover itself.

    a.tooltip:hover {
    something here;
    }

    I've heard "foo: bar" would even work, but of course let's use something that's valid css.

    I use "visibility: visible" because that's already the default for those tooltips, so it changes nothing. Yet, it'll somehow make IE show the hover.

    You could also, instead, have "font-weight: bold" or "background-color: #fff" or whatever. It almost doesn't matter, but you would want something that doesn't actually change the way the thing looks.

    You must always keep the trigger apart from all other hover declarations. You unfortunately cannot simply add it to the regular :hover.

    a.tooltip {
    styles;
    }
    a.tooltip:hover {
    trigger here;
    }
    a.tooltip:hover {
    whatever hover styles you want for all browsers;
    }
     
    Stomme poes, Nov 22, 2008 IP