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>
