Results 1 to 3 of 3

Thread: css tooltip positioning

  1. #1
    Join Date
    Jun 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css tooltip positioning

    hi
    i have been looking for a pure css tooltip, and came across this one:
    Code:
    http://psacake.com/web/jl.asp
    its exactly what i want, but i don't know how to position the tooltip properly...
    i want it to appear on the bottom-left side of the link, like this:

    [---------------blank-----------][LINK]
    [------------TOOLTIP-------------]

    can someone please tell me how to position the tooltip like above??
    thanks a lot!
    Code:
    a.info{
        position:relative; /*this is the key*/
        z-index:24; background-color:#ccc;
        color:#000;
        text-decoration:none}
    
    a.info:hover{z-index:25; background-color:#ff0}
    
    a.info span{display: none}
    
    a.info:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top:2em; left:2em; width:15em;
        border:1px solid #0cf;
        background-color:#cff; color:#000;
        text-align: center}
    Last edited by nihalz; 08-01-2007 at 08:42 PM.

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You would adjust it in the css for the hover state, for example, I set left to -15em and top to 1em and it displays just below and to the left. Just make sure your page is set up so that there will be room for the hover span to display, or it will wind up off the page.

    Code:
    a.info:hover span{ /*the span will display just on :hover state*/
        display:block;
        position:absolute;
        top:1em; left:-15em; width:15em;    /*adjust here to change position*/
        border:1px solid #0cf;
        background-color:#cff; color:#000;
        text-align: center}

  3. #3
    Join Date
    Jun 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sweet... thanks for the help!

Bookmarks

Posting Permissions

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