css html toolstip

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Plug-in CSS: Example 1</title>
<link rel='stylesheet' type='text/css' href='PC.css' />
<style type='text/css'>
.tooltip:hover, .tooltipfade:hover {
    text-decoration:none;
    position:relative;
}            
.tooltip span {
    display:none;
}
.tooltip:hover span {
    display:block;
    position:absolute;
    top:40px;
    left:0px;
    white-space:nowrap;
    background:#ffffdd;
    border:1px solid #888888;
    color:#444444;
    font-family:Arial, Helvetica, sans-serif;
    font-size:8pt;
    line-height:95%;
    padding:2px 5px;
}
.tooltipfade span {
    position:absolute;
    white-space:nowrap;
    font-family:Arial, Helvetica, sans-serif;
    font-size:8pt;
    line-height:95%;
    padding:2px 5px;
    top:0px;
    top:-10000px; /* IE hack to keep it out of the way */
    left:0px;
    background:#ffffdd;
    border:1px solid #888888;
    color:#444444;
    opacity:0;
    filter:alpha(opacity = '0');
}
.tooltipfade:hover span {
    -moz-transition
    :all .5s linear;
    -webkit-transition:all .5s linear;
    -o-transition
    :all .5s linear;
    transition
    :all .5s linear;
    opacity:1;
    filter:alpha(opacity = '100');
    top:40px;
}

</style>
</head>
<body>
<a class='tooltip' href='/'>Home<span>Go to the Home page</span></a>
<a href='/'>Home</a> |
<a href='/news/'>News</a> |
<a class='tooltip' href='/links/'>Links<span>Click here for a<br />
collection of great links</span></a><br /><br />
A planet is a celestial body orbiting a star or stellar remnant that is
massive enough to be rounded by its own
<span class='tooltipfade i'>gravity<span>Gravitation, or gravity, is one
of the four<br />fundamental interactions of nature (along<br />with the
strong force, electromagnetism<br />and the weak force)</span></span>,
is not massive enough to cause thermonuclear fusion, and has (etc...)

</div>

</body>
</html>

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s