Tooltip

Generates a tooltip for the specified element. Options will vary by framework. The following example assumes jQuery as the selected framework.

<style>
	.box
	{
		border:1px solid #ccc;
		width:400px;
		height:40px;
		background-color:#eee;
		margin:10px;
		padding:10px;
	}
	.resize
	{
		background-color:#ffffcc !important;
	}
	.resize_border
	{
		border:1px solid #ff0000;
	}
</style>
 
<input type="text" id="tooltip1" value="test1"/>
<input type="text" id="tooltip2" value="test2"/>
<input type="text" id="tooltip3" value="test3"/>
<input type="text" id="tooltip4" value="test4">
 
<div class="box" behavior="tooltip[id=tooltip1]">basic</div>
<div class="box" behavior="tooltip[id=tooltip2,showEffect=slideDown,hideEffect=explode]">custom show/hide effect</div>
<div class="box" behavior="tooltip[id=tooltip3,delay=500]">hide delay</div>
<div class="box" id="api_tooltip">API tooltip</div>
<div behavior="resizable and draggable and tooltip[id=tooltip5]" class="box">
	resizable and draggable tooltip
</div>
 
<script>	
	App.addBehavior('api_tooltip','tooltip',{id:'tooltip4'});
	App.addBehavior('multiple_api','modal',{});
	App.addBehavior('multiple_api','draggable',{});
	App.addBehavior('multiple_api','resizable',{});
</script>