Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onmouseover window

    Hi. I want to display a window with a text on mouseover and it dissapears onmouseout. Could you remind me with some link maybe, how was it called, and how could it be achieved?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there keissfootball,

    does this help...

    link
    code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>css tooltip</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        background-color:#eef;
    }
    #wrapper {
        width: 488px;
        height:298px;
        background-color:#fff;
        border:6px double #006;
        margin:185px auto;
    }
    .container {
        height:30px;
        width:400px;
        margin: 20px auto;
    }
    a.info {
        position:relative; /*this is the key*/
        z-index:0;
        color:#666;
        font-style:oblique;
        text-decoration:none;  
        display:block;
        float:left;
    }
    .spanny {
        margin:0 3px;
        float:left;
    }
    a.info .ttip {
        display: none;
        float:left;
    }
    a.info:hover{
        z-index:1;
        background-color:#fff;
    }
    a.info:hover .ttip {  
        display:block;
        position:absolute;
        top:20px;
        left:40px;
        width:120px;
        border:3px double #0cf;
        background-color:#cff;
        color:#099;
        font-size:10px;
        font-style:normal;
        padding:5px;
    }
    #pic {
        background-image:url(../images/anim3.gif);
        border:3px solid #060;
        width:100px;
        height:100px;
    }
    a.info:hover #pictip {
        top:20px;
        left:-280px;
        width:240px;
        border:3px double #fc0;
        background-color:#ffc;
        color:#990;
        font-size:12px;
        text-align:justify;
        padding:10px;
    }
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div class="container">
    <span class="spanny">This</span>
    <a href="#" class="info">word
    <span class="ttip">
    This is the customised tool-tip.  It's main advantage over the 'title' attribute
    is that it remains in view whilst the hover state is maintained, thereby
    allowing for a large amount of information to be imparted to the reader
    </span>
    </a>
    <span class="spanny">will produce the tool-tip.</span>
    </div>
    
    <div class="container">
    <span class="spanny">This</span>
    <a href="#" class="info" id="pic">
    <span class="ttip" id="pictip">
    This is the customised tool-tip.  It's main advantage over the 'title' attribute
    is that it remains in view whilst the hover state is maintained, thereby
    allowing for a large amount of information to be imparted to the reader. As you
    can see it is also easily customizable.
    </span>
    </a>
    <span class="spanny">can also produce the tool-tip.</span>
    </div>
    
    </div>
    
    </body>
    </html>
    coothead

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that's the thing I was looking for, tnx coothead!!!

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,695
    Thanks
    0
    Thanked 232 Times in 227 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •