craic/Minimal_YUI_Tooltip_Example.html

## Minimal_YUI_Tooltip_Example.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://prototypejs.org/javascripts/prototype.js"></script>

<script type="text/javascript">
	function setup_tooltips() {
	var ids = $$('*.help');  	// Get all elements with class 'help'
	tooltip = new YAHOO.widget.Tooltip("tooltip", { context:$$('*.help') });
	}
</script>

</head>

<body class="yui-skin-sam" onload="setup_tooltips()">
<h2>Minimal YUI Tooltip Example</h2>

<p>This is simple example of using the Yahoo YUI Tooltip widget to render simple online help on
	a page.</p>

<p>Any element can be set up in this way by giving it a specific class (e.g. help) and defining this in the
	JavaScript function setup_tooltips(). All elements with this class will then trigger the appearance
	of a tooltip when the mouse is placed over them.</p>

<p>The text displayed in the tooltip is taken from the <i>title</i> attribute of the
	element. This can be plain text or can contain HTML, which will be rendered when the tooltip is displayed.
	You should probably keep such formatting pretty basic.</p>

<p>In this example I'm using a couple of the YUI javascript libraries as well as Prototype and a simple function
of my own that creates the tooltips with each element of class 'help'. Look at the page source for details.</p>

<p><a class='help' href="http://craic.com/" title="This is Tooltip #1">Tooltip 1</a></p>

<p><a class='help' href="http://craic.com/" title="This is Tooltip #2">Tooltip 2</a></p>

<p><a class='help' href="http://craic.com/" title="You can also embed <i>simple</i> <b>HTML</b> into<br/>the tooltip text and the <span style='color: red;'>widget</span> will render that!">Tooltip 3 (with embedded HTML)</a></p>

<p>&nbsp; </p>
<p>This example is just a starting point. You can find more information is available at the <a href="http://developer.yahoo.com/yui/container/tooltip/">Yahoo! Developer Network site</a></p>
<p>June 2009 - Rob Jones - <a href="http://craic.com">Craic Computing LLC</a></p>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css" />
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js"></script>
	<script type="text/javascript" src="http://prototypejs.org/javascripts/prototype.js"></script>

	<script type="text/javascript">
	function setup_tooltips() {
	var ids = $$('*.help'); // Get all elements with class 'help'
	tooltip = new YAHOO.widget.Tooltip("tooltip", { context:$$('*.help') });
	}
	</script>

	</head>

	<body class="yui-skin-sam" onload="setup_tooltips()">
	<h2>Minimal YUI Tooltip Example</h2>

	<p>This is simple example of using the Yahoo YUI Tooltip widget to render simple online help on
	a page.</p>

	<p>Any element can be set up in this way by giving it a specific class (e.g. help) and defining this in the
	JavaScript function setup_tooltips(). All elements with this class will then trigger the appearance
	of a tooltip when the mouse is placed over them.</p>

	<p>The text displayed in the tooltip is taken from the <i>title</i> attribute of the
	element. This can be plain text or can contain HTML, which will be rendered when the tooltip is displayed.
	You should probably keep such formatting pretty basic.</p>

	<p>In this example I'm using a couple of the YUI javascript libraries as well as Prototype and a simple function
	of my own that creates the tooltips with each element of class 'help'. Look at the page source for details.</p>

	<p><a class='help' href="http://craic.com/" title="This is Tooltip #1">Tooltip 1</a></p>

	<p><a class='help' href="http://craic.com/" title="This is Tooltip #2">Tooltip 2</a></p>

	<p><a class='help' href="http://craic.com/" title="You can also embed <i>simple</i> <b>HTML</b> into<br/>the tooltip text and the <span style='color: red;'>widget</span> will render that!">Tooltip 3 (with embedded HTML)</a></p>

	<p>  </p>
	<p>This example is just a starting point. You can find more information is available at the <a href="http://developer.yahoo.com/yui/container/tooltip/">Yahoo! Developer Network site</a></p>
	<p>June 2009 - Rob Jones - <a href="http://craic.com">Craic Computing LLC</a></p>
	</body>
	</html>