Realizing tooltips without JS is very simple: we just need to create a span that contains the text we want to show at mouse hover.
This is HTML code:


  <a href="http://www.muzedon.com" >
      <span>This is my website</span>
  </a>


Thanks to style sheets this span will be possible to show the text only to mouse hover, in a absolute position. Tooltip support text will be positioned below its container link , adding the attribute position: relative.

Here you are CSS code:

a{
      position:relative;
      z-index:24; background-color: #ccc;color: #000;
      text-decoration: none
}

a:hover{
      z-index: 25; background-color: #ff0
}

The z-index declarations are necessary to fix some Explorer behaviours. Without the z-index tooltips are positioned below the linked text.
Furthermore, hover must have at least a property change to be showed in IE (we change the background-color)

Now we can add span-styles. We have to show the span at the mouse hover.
Here you are the CSS code:

a span{
      display: none
}

a:hover span{
      display: block; position:absolute;
      top: 2em; left: 2em; width: 15em;
      border: 1px solid #0cf; background-color: #cff; color:#000;
      text-align: center
}

Obviously we can edit background and borders color to adjust the tooltips to our page.

Rating is available to Members only.

Please login or register to vote.

No Ratings have been Posted.