CSS tooltip

Discussion in 'HTML' started by wilsos6@hotmail.co.uk, Apr 21, 2008.

  1. Guest

    Hello,

    I'm using the following code to display CSS tooltips over a couple of
    images. The code is based on the example posted at http://lixlpixel.org/css_tooltip/
    and on a few similar sites.

    The code works fine on Firefox, but on IE, the tooltip displayed when
    you hover over 'image1' is beneath 'image2'. Any suggests on how I can
    make both tooltips hover above the images would be greatly
    appreciated.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <html>
    <head>
    <style type="text/css">
    a.tip{
    text-decoration:none;
    background:transparent;
    position:relative;
    display:block;
    }

    a.tip span{display: none; }

    a.tip:hover span{
    display:block;
    position:absolute;
    top: 10px;
    left: -10px;
    width: 50px;
    height: 40px;
    padding: 5px;
    BACKGROUND: #FFFFFF;
    color: #000000;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    FONT-FAMILY: arial;
    FONT-SIZE: 11px;
    -moz-border-radius: 5px; /* FF */
    -webkit-border-radius: 5px; /* Safari */
    z-index:25;

    }
    </style>
    </head>
    <body>
    <div id="test" style="position : relative ;">
    <div style="position:absolute;left: 0px ; top : 0px;"><a
    href="http://www.google.com" class="tip"><img src="image1.jpg"/
    ><span>This is a tooltip</span></a></div>

    <div style="position:absolute; left: 40px ; top : 0px;"><a
    href="http://www.google.com" class="tip"><img src="image2.jpg"/
    ><span>This is another tooltip</span></a></div>

    </div>
    </html>
    </body>


    Thank you,
    Stuart
     
    , Apr 21, 2008
    #1
    1. Advertising

  2. John Hosking Guest

    wrote:
    >
    > I'm using the following code to display CSS tooltips over a couple of
    > images. The code is based on the example posted at http://lixlpixel.org/css_tooltip/
    > and on a few similar sites.


    No URL of your own?

    >
    > The code works fine on Firefox, but on IE, the tooltip displayed when
    > you hover over 'image1' is beneath 'image2'. Any suggests on how I can
    > make both tooltips hover above the images would be greatly
    > appreciated.
    >


    The simplicity, brevity, reliability, and validity of this code (below)
    is not worth the loss of background colors and (in some browsers)
    rounded corners on your tooltips?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Tooltips: to style or not to style</title>
    <style type="text/css">
    #test { position:relative; }
    #searchlink1 { position:absolute; left:0px; top:0px; }
    #searchlink2 { position:absolute; left:40px; top:0px; }
    </style>
    </head>
    <body>
    <div id="test">
    <div id="searchlink1">
    <a href="http://www.google.com/">
    <img src="image1.jpg" alt="This is a tooltip"
    title="This is a tooltip">>
    </a>
    </div>
    <div id="searchlink2">
    <a href="http://www.google.com/">
    <img src="image2.jpg" alt="This is another tooltip"
    title="This is another tooltip">
    </a>
    </div>
    </div>
    </body>
    </html>

    Was the Eric Meyer link on the page for which you did provide a URL not
    helpful to you?

    --
    John
    Yeah, yeah: The UIP: http://improve-usenet.org/
     
    John Hosking, Apr 22, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lucky
    Replies:
    0
    Views:
    2,402
    Lucky
    Dec 22, 2005
  2. VB Programmer
    Replies:
    1
    Views:
    349
    Steve C. Orr, MCSD
    Jul 1, 2003
  3. Jim Heavey

    ToolTip

    Jim Heavey, Oct 17, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    611
    Jim Heavey
    Oct 17, 2003
  4. Steve R
    Replies:
    0
    Views:
    596
    Steve R
    Oct 30, 2003
  5. Radu
    Replies:
    1
    Views:
    548
    Bruce Barker
    Jan 8, 2007
Loading...

Share This Page