HTML i CSS >> tooltip podpowiedzi w chmurkach

tutorial:
http://perfectionorvanity.com/2005/12/12/tooltip-w-css/

Przykładowa podstrona  z tym efektem:
http://riddle.pl/-/xhtml/tooltips/


------------------------------------- Kod przykładowej podstrony: -------------------------------------


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>

  <title>CSS Tooltips (works in Internet Explorer too)</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<style type="text/css">
		body {
			font: normal 100%/150% Verdana, Tahoma, sans-serif;
		}
	
		.tooltip {
			position: relative;
		}
		
		.tooltip dfn { 
			display: none;
		}
		.tooltip:hover dfn, .tooltiph dfn { 
			display: block;
			position: absolute;
			left: 0;
			top: 1.5em;
				
			padding: 4px 10px;
			
			border: 1px dotted;
			background: #FFFFFF;
			color: #000;
			
			font-style: normal;
			font-size: 0.8em;
			line-height: 100%;
			text-decoration: none;
		}
		
		.tooltip dfn span {
			display: block;
		}
	</style>
	
	<!--[if lt IE 7]>
		<script src="ietooltips.js" type="text/javascript"></script>
	<![endif]-->

	
</head>
<body>

<h1>CSS Tooltip</h1>

<p>Works in Firefox, Opera and Internet Explorer. Author: <a href="http://riddle.jogger.pl">Riddle</a></p>

<h2>Single line</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur scelerisque. Aenean viverra iaculis dolor. Sed lacus mi, ullamcorper ac, euismod vitae, scelerisque eu, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a class="tooltip" href="link">Link's&nbsp;definition<dfn>Tooltip</dfn></a>. Proin ligula leo, pharetra non, facilisis sagittis, commodo at, nisl. Pellentesque vitae mi. In porttitor scelerisque enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque varius cursus nulla. Integer non tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin odio. Quisque erat pede, posuere et, facilisis quis, molestie sed, felis. Proin urna urna, lobortis vitae, fermentum ut, elementum non, sapien. Cras a ipsum.</p>


<h2>Multiline</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur scelerisque. Aenean viverra iaculis dolor. Sed lacus mi, ullamcorper ac, euismod vitae, scelerisque eu, leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a class="tooltip" href="link">Link's&nbsp;definition<dfn><span>Tooltip</span> <span>Line 1</span> <span>Next Line</span></dfn></a>. Proin ligula leo, pharetra non, facilisis sagittis, commodo at, nisl. Pellentesque vitae mi. In porttitor scelerisque enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque varius cursus nulla. Integer non tellus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin odio. Quisque erat pede, posuere et, facilisis quis, molestie sed, felis. Proin urna urna, lobortis vitae, fermentum ut, elementum non, sapien. Cras a ipsum.</p>

</body>
</html>

------------------------------------- plik javascript: ietooltips.js -----------------------------------

document.getElementsByClassName = function(className) {
  var children = document.getElementsByTagName('*') || document.all;
  var elements = new Array();
 
  for (var i = 0; i < children.length; i++) {
    var child = children[i];
    var classNames = child.className.split(' ');
    for (var j = 0; j < classNames.length; j++) {
      if (classNames[j] == className) {
        elements.push(child);
        break;
      }
    }
  } 
  return elements;
} 

function addEvent(obj, evType, fn) { 
	if (obj.attachEvent) {
		var r = obj.attachEvent("on" + evType, fn);
		return r;
	}
	else {
		return false;
	}
}

function ieTooltips() {
	var tiplinks = document.getElementsByClassName('tooltip');	
	for (var i = 0; i < tiplinks.length; i++) {	
		tiplinks[i].onmouseover = function() { this.className += ' tooltiph' }
		tiplinks[i].onmouseout = function() { this.className = 'tooltip'; }
	}
}

addEvent(window, "load", ieTooltips);
HTML i CSS >> tooltip podpowiedzi w chmurkach

HTML i CSS

PHP i MYSQL

LINKI
