CSS Tooltip

A tooltip is a small popup triggered by a MouseOver that displays quick info about anything. This article uses a mix of CSS and Javascript to produce very simple yet functional code for multiple tooltips.

Example:

Move your mouse over this text to see the tooltip This is an example of a tooltip at work

This tooltip is very simple and easy to implement. Just add the CSS styles to your page and use the code snippet below anytime you need a tooltip.

The CSS code:

<style type="text/css">
.ToolText{position:relative; }
.ToolTextHover{position:relative;}
.ToolText span{display: none;}

.ToolTextHover span{
  display:block;
  position:absolute;
  border:1px solid black;
  top:1.3em;
  left:5px;
  background-color:gray; color:white;
  text-align: center;
}
</style>

The tooltip snippet:

<p class="ToolText" onMouseOver="javascript:this.className='ToolTextHover'" onMouseOut="javascript:this.className='ToolText'">

This is the text that will cause the tooltip

<span> And this is the Tooltip's text </span></p>

Just copy the snippet and replace the text (or content) with your own.

Author : Esopo, Read 41500 times, Comments: 0

Rating :

|  Thursday, 30. June 2005

Add new comment/Comments

Your rating :   Poor  Excellent

Do you have something to say?

Featured *

DOWNLOAD: Reactor Server - All in one localhost

It almost felt like a joke finding out about this type of server packs after spending a couple of days working hard to setup my personal web server to test my PHP – MySql scripts. Reactor server comes with Apache, PHP, MySql, SQLite, phpMyAdmin, Nuke, etc, and all in an almost plug and play package. If you don’t have one of these in your PC, you better be asking yourself why. – The only draw back: about 38 MBs in size.
NOTE: This is ver1.2 that supports PHP 4. For the latest version visit their homepage.

HOMEPAGE: http://www.reactorserver.com/
DOWNLOAD: http://prdownloads.sourceforge.net/reactorsrv/Reactor1.2.exe?download
SCREENSHOT: http://www.reactorserver.com/frontpage/screenshots/panel.gif

View all downloads

LINK: PHP manual online

Often people ask the same question: What is the best PHP book? - The answer is so simple they still go ahead and buy some book. Besides being one of the most thorough manuals ever written, the online PHP manual includes user comments adding greatly to its richness. This is the first and most important resource a PHP coder should have.
http://www.php.net/manual/en/

View all links