JavaScript DHTML/YUI Library/Tooltip
Содержание
One Tooltip, Many Context Elements
<source lang="html4strict">
<!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=utf-8">
<title>One Tooltip, Many Context Elements</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script>
<style type="text/css">
.ttGroup { float:left; margin:10px; } .ttGroup .grphd { font-weight:bold; background-color:#ccc; border:1px solid #000; padding:2px; } .ttGroup .grpbd { padding:10px; } #ttGroupB:after { content:"."; display:block; clear:left; visibilty:hidden height:0; width:0; }
</style>
</head> <body class=" yui-skin-sam">
One Tooltip, Many Context Elements
In the example below, a single Tooltip instance is used to display tooltips for multiple context elements.
- For one set of links (Group A), the Tooltip text is provided by the title attribute of the link
- For the other set (Group B), we"ll use context related events to set the text property just before the the tooltip is displayed for each link
<script type="text/javascript">
YAHOO.namespace("example.container"); YAHOO.example.container.init = function() { // CREATE LINKS FOR EXAMPLE function createLink(i, container, title) { var a = document.createElement("a"); a.href = "http://www.yahoo.ru/"; a.innerHTML = i + ". Hover over me to see my Tooltip"; if (title) { a.title = title; } container.appendChild(a); container.appendChild(document.createElement("br")); container.appendChild(document.createElement("br")); return a; } function createTitledLinks() { var ids = []; var container = YAHOO.util.Dom.get("containerA"); for (var i = 1; i <= 5; i++) { // NOTE: We"re setting up titles for these links var a = createLink(i, container, "Tooltip for link A" + i + ", set through title"); a.id = "A" + i; ids.push(a.id); } return ids; } function createUntitledLinks() { var ids = []; var container = YAHOO.util.Dom.get("containerB"); for (var i = 1; i <= 5; i++) { // NOTE: We"re not setting up titles for these links var a = createLink(i, container, null); a.id = "B" + i; ids.push(a.id); // Change standard text for the 3rd link, to reflect // that we"ll disable the tooltip for it. if ( i == 3 ) { a.innerHTML = i + ". Tooltip display prevented"; } } return ids; } var groupAIds = createTitledLinks(); var groupBIds = createUntitledLinks(); // TOOLTIP CODE // For links in group A which all have titles, this is all we need. // The tooltip text for each context element will be set from the title attribute // We"ll also setup Tooltip A to use the FADE ContainerEffect var ttA = new YAHOO.widget.Tooltip("ttA", { context:groupAIds, effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.20} }); // For links in group B, we"ll set the tooltip text dynamically, // right before the tooltip is triggered, using the id of the triggering context. // We"ll also prevent the tooltip from being displayed for link B3. var ttB = new YAHOO.widget.Tooltip("ttB", { context:groupBIds }); // Stop the tooltip from being displayed for link B3. ttB.contextMouseOverEvent.subscribe( function(type, args) { var context = args[0]; if (context && context.id == "B3") { return false; } else { return true; } } ); // Set the text for the tooltip just before we display it. ttB.contextTriggerEvent.subscribe( function(type, args) { var context = args[0]; this.cfg.setProperty("text", "Tooltip for " + context.id + ", set using contextTriggerEvent"); } ); }; YAHOO.util.Event.addListener(window, "load", YAHOO.example.container.init);
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Simple Tooltip Example
<source lang="html4strict">
<!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=utf-8">
<title>Simple Tooltip Example</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script>
</head> <body class=" yui-skin-sam">
Simple Tooltip Example
Hover over the orange box and the link to see their Tooltips.
<style>
#ctx { background:orange;width:200px;height:200px; }
</style>
Hover over me to see a Tooltip!
<a id="link" href="http://www.yahoo.ru/" title="Do You Yahoo?">Hover over me to see a Tooltip!</a>
<script type="text/javascript">
YAHOO.namespace("example.container"); YAHOO.example.container.tt1 = new YAHOO.widget.Tooltip("tt1", { context:"ctx", text:"My text was set using the "text" configuration property" }); YAHOO.example.container.tt1.beforeShowEvent.subscribe(function(){YAHOO.log("Tooltip one is appearing.","info","example");}); YAHOO.example.container.tt2 = new YAHOO.widget.Tooltip("tt2", { context:"link" });
</script>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>