Custom tooltip style
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Tooltip</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<script language="javascript">
var tooltip1;
var tooltip2;
var tooltip3;
function init() {
tooltip2 = new YAHOO.widget.Tooltip("tt2", { context:"link" } );
tooltip3 = new YAHOO.widget.Tooltip("tt3", { context:"img", showdelay: 1000 });
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div class="box" id="bodyMain">
<div class="hd">
<h1>Tooltip Example</h1>
</div>
<div class="bd">
<p>The creation of a Tooltip is very straight-forward. To instantiate a Tooltip, the code looks like this:</p>
<code>tooltip1 = new YAHOO.widget.Tooltip("tt1", { context:"btn1", text:"I'm a button. You can click me!" } );</code>
<p>Tooltips are generally always created dynamically, and never need to be marked up in advance. The first argument is the DOM id that you want to associate with the Tooltip. The second argument is the user configuration object literal used for configuring the Tooltip. If no text is specified, the Tooltip will attempt to use the object's title attribute to set the text.</p>
<p>The first example, tooltip1, is included in an inline script tag to demonstrate that Tooltip classes can be included inline during document rendering.</p>
<p>By default, are shown after 200ms, displayed for 5 seconds and dismissed, or hidden 250ms after moving the mouse away from the context element. You can configure these timings, as shown in the code for tooltip3 (the one associated with the image), where we cause the Tooltip to display after 1 second, instead of the default:</p>
<code>tooltip3 = new YAHOO.widget.Tooltip("tt3", { context:"img", showdelay: 1000 });</code>
<p style="margin-top:25px;padding-top:25px;border-top:1px dotted black"><button id="btn1">Hover over me</button></p>
<script>tooltip1 = new YAHOO.widget.Tooltip("tt1", { container:"bodyMain", context:"btn1", text:"I'm a button. You can click me!"} ); // This code is placed inline in a script tag to show that tooltips can be instantiated inline as well.</script>
<p><a id="link" href="http://www.yahoo.com" title="I'm a link! I go to another page!" alt="">Hover over me too!</a></p>
<p><img id="img" src="http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/alt3/close12_1.gif" title="I'm an image and this is my title text!"/></p>
</div>
</div>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category