DHTML Tool Tip

**agmorgan** · Jun 23rd, 2005, 10:13 AM

If I use the Title attribute of the span tag I get a popup tool tip (I think the correct term might be Title Box).
Unfortunately not all browsers support long tool tips or ones with line breaks in them.

A replacement for this is a DHTML solution using Javascript and onmouseover.
http://www.dynamicdrive.com/dynamici...tmltooltip.htm

Does anyone have a better/smaller/simpler version that is cross browser compliant?

**DeadEyes** · Jun 23rd, 2005, 10:31 AM

I came accross this CSS tool tip here

Code:

<style>
  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:#AAAA00; color:#000;
      text-align: center
  }
  </style>
  </head>
  <body>
  <a href="" class="info">test<span>Pure CSS Tooltips</span></a>
    
  </body>

**agmorgan** · Jun 23rd, 2005, 11:25 AM

Top stuff!
Thanks!

You can make it work for text as well if you void the link

Code:

<A HREF="javascript:void(0)"

Thread: DHTML Tool Tip

Thread Tools

Display

DHTML Tool Tip

Re: DHTML Tool Tip

Re: DHTML Tool Tip

Posting Permissions