4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
551 lines
19 KiB
HTML
551 lines
19 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<title>JavaScript Documentation - Tooltip.js</title>
|
|
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="header">
|
|
<h1>JavaScript Documentation</h1>
|
|
<h3><a href="./index.html">Yahoo! UI Library: Container</a></h3>
|
|
|
|
<div class="breadcrumbs">
|
|
|
|
|
|
|
|
|
|
<a href="./index.html">Yahoo! UI Library: Container</a>
|
|
>
|
|
<strong>Tooltip.js</strong>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="body">
|
|
|
|
|
|
<div class="nav">
|
|
<div class="module resources">
|
|
<ul class="content">
|
|
<li><a href="overview-tree.html">Tree View</a></li>
|
|
<li><a href="index-all.html">Element Index</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="module">
|
|
<h4><a href="./allclasses-noframe.html">Classes</a></h4>
|
|
<ul class="content">
|
|
|
|
|
|
|
|
<li>
|
|
<a href="YAHOO.util.Config.html">
|
|
YAHOO.util.Config</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.util.KeyListener.html">
|
|
YAHOO.util.KeyListener</a>
|
|
</li>
|
|
|
|
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.ContainerEffect.html">
|
|
YAHOO.widget.ContainerEffect</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.Dialog.html">
|
|
YAHOO.widget.Dialog</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.Module.html">
|
|
YAHOO.widget.Module</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.Overlay.html">
|
|
YAHOO.widget.Overlay</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.OverlayManager.html">
|
|
YAHOO.widget.OverlayManager</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.Panel.html">
|
|
YAHOO.widget.Panel</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.SimpleDialog.html">
|
|
YAHOO.widget.SimpleDialog</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="YAHOO.widget.Tooltip.html">
|
|
YAHOO.widget.Tooltip</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="module">
|
|
<h4><a href="./overview-summary.html">Files</a></h4>
|
|
<ul class="content">
|
|
|
|
<li>
|
|
<a href="overview-summary-Config.js.html">
|
|
Config.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-ContainerEffect.js.html">
|
|
ContainerEffect.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Dialog.js.html">
|
|
Dialog.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-KeyListener.js.html">
|
|
KeyListener.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Module.js.html">
|
|
Module.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Overlay.js.html">
|
|
Overlay.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-OverlayManager.js.html">
|
|
OverlayManager.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Panel.js.html">
|
|
Panel.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-SimpleDialog.js.html">
|
|
SimpleDialog.js</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="overview-summary-Tooltip.js.html">
|
|
Tooltip.js</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
|
|
|
|
|
|
<h2>Tooltip.js</h2>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="meta">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="quick-links">
|
|
<strong>Quick Links:</strong>
|
|
|
|
|
|
<a href="#classSummary">Class Summary</a> |
|
|
|
|
|
|
|
|
|
|
|
|
<a href="#source">Source Code</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="section class summaries">
|
|
<h3><a name="classSummary">Class Summary</a> <span class="top">[<a href="#top">top</a>]</span></h3>
|
|
|
|
<div class="content">
|
|
<table border="1" cellpadding="3" cellspacing="0">
|
|
|
|
<tr>
|
|
<td class="name">
|
|
<a href="YAHOO.widget.Tooltip.html">YAHOO.widget.Tooltip</a>
|
|
</td>
|
|
<td class="overview"> </td>
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="section source">
|
|
<h3><a name="source">Souce Code</a> <span class="top">[<a href="#top">top</a>]</span></h3>
|
|
<pre class="sourceview"><span class="comment">/*
|
|
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
|
|
Code licensed under the BSD License:
|
|
http://developer.yahoo.net/yui/license.txt
|
|
Version 0.11.3
|
|
*/</span>
|
|
|
|
<span class="comment">/**
|
|
* Tooltip is an implementation of Overlay that behaves like an OS tooltip, displaying when the user mouses over a particular element, and disappearing on mouse out.
|
|
* <span class="attrib">@extends</span> YAHOO.widget.Overlay
|
|
* <span class="attrib">@param</span> {string} el The element ID representing the Tooltip <em>OR</em>
|
|
* <span class="attrib">@param</span> {Element} el The element representing the Tooltip
|
|
* <span class="attrib">@param</span> {object} userConfig The configuration object literal containing the configuration that should be set for this Overlay. See configuration documentation for more details.
|
|
* <span class="attrib">@constructor</span>
|
|
*/</span>
|
|
YAHOO.widget.Tooltip = <span class="reserved">function</span>(el, userConfig) {
|
|
YAHOO.widget.Tooltip.superclass.constructor.call(<span class="reserved">this</span>, el, userConfig);
|
|
};
|
|
|
|
YAHOO.extend(YAHOO.widget.Tooltip, YAHOO.widget.Overlay);
|
|
|
|
<span class="comment">/**
|
|
* Constant representing the Tooltip CSS class
|
|
* <span class="attrib">@type</span> string
|
|
* <span class="attrib">@final</span>
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.CSS_TOOLTIP = <span class="literal">"tt"</span>;
|
|
|
|
<span class="comment">/**
|
|
* The Tooltip initialization method. This method is automatically called by the constructor. A Tooltip is automatically rendered by the init method, and it also is set to be invisible by default, and constrained to viewport by default as well.
|
|
* <span class="attrib">@param</span> {string} el The element ID representing the Tooltip <em>OR</em>
|
|
* <span class="attrib">@param</span> {Element} el The element representing the Tooltip
|
|
* <span class="attrib">@param</span> {object} userConfig The configuration object literal containing the configuration that should be set for this Tooltip. See configuration documentation for more details.
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(el, userConfig) {
|
|
<span class="reserved">if</span> (document.readyState && document.readyState != <span class="literal">"complete"</span>) {
|
|
var deferredInit = <span class="reserved">function</span>() {
|
|
<span class="reserved">this</span>.init(el, userConfig);
|
|
};
|
|
YAHOO.util.Event.addListener(window, <span class="literal">"load"</span>, deferredInit, <span class="reserved">this</span>, true);
|
|
} <span class="reserved">else</span> {
|
|
YAHOO.widget.Tooltip.superclass.init.call(<span class="reserved">this</span>, el);
|
|
|
|
<span class="reserved">this</span>.beforeInitEvent.fire(YAHOO.widget.Tooltip);
|
|
|
|
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.element, YAHOO.widget.Tooltip.CSS_TOOLTIP);
|
|
|
|
<span class="reserved">if</span> (userConfig) {
|
|
<span class="reserved">this</span>.cfg.applyConfig(userConfig, true);
|
|
}
|
|
|
|
<span class="reserved">this</span>.cfg.queueProperty(<span class="literal">"visible"</span>,false);
|
|
<span class="reserved">this</span>.cfg.queueProperty(<span class="literal">"constraintoviewport"</span>,true);
|
|
|
|
<span class="reserved">this</span>.setBody(<span class="literal">""</span>);
|
|
<span class="reserved">this</span>.render(<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"container"</span>));
|
|
|
|
<span class="reserved">this</span>.initEvent.fire(YAHOO.widget.Tooltip);
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Initializes the class's configurable properties which can be changed using the Overlay's Config object (cfg).
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.initDefaultConfig = <span class="reserved">function</span>() {
|
|
YAHOO.widget.Tooltip.superclass.initDefaultConfig.call(<span class="reserved">this</span>);
|
|
|
|
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"preventoverlap"</span>, { value:true, validator:<span class="reserved">this</span>.cfg.checkBoolean, supercedes:[<span class="literal">"x"</span>,<span class="literal">"y"</span>,<span class="literal">"xy"</span>] } );
|
|
|
|
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"showdelay"</span>, { value:200, handler:<span class="reserved">this</span>.configShowDelay, validator:<span class="reserved">this</span>.cfg.checkNumber } );
|
|
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"autodismissdelay"</span>, { value:5000, handler:<span class="reserved">this</span>.configAutoDismissDelay, validator:<span class="reserved">this</span>.cfg.checkNumber } );
|
|
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"hidedelay"</span>, { value:250, handler:<span class="reserved">this</span>.configHideDelay, validator:<span class="reserved">this</span>.cfg.checkNumber } );
|
|
|
|
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"text"</span>, { handler:<span class="reserved">this</span>.configText, suppressEvent:true } );
|
|
<span class="reserved">this</span>.cfg.addProperty(<span class="literal">"container"</span>, { value:document.body, handler:<span class="reserved">this</span>.configContainer } );
|
|
};
|
|
|
|
<span class="comment">// BEGIN BUILT-IN PROPERTY EVENT HANDLERS //</span>
|
|
|
|
<span class="comment">/**
|
|
* The default event handler fired when the "text" property is changed.
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.configText = <span class="reserved">function</span>(type, args, obj) {
|
|
var text = args[0];
|
|
<span class="reserved">if</span> (text) {
|
|
<span class="reserved">this</span>.setBody(text);
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* The default event handler fired when the "container" property is changed.
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.configContainer = <span class="reserved">function</span>(type, args, obj) {
|
|
var container = args[0];
|
|
<span class="reserved">if</span> (typeof container == <span class="literal">'string'</span>) {
|
|
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"container"</span>, document.getElementById(container), true);
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* The default event handler fired when the "context" property is changed.
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.configContext = <span class="reserved">function</span>(type, args, obj) {
|
|
var context = args[0];
|
|
<span class="reserved">if</span> (context) {
|
|
|
|
<span class="comment">// Normalize parameter into an array</span>
|
|
<span class="reserved">if</span> (! (context instanceof Array)) {
|
|
<span class="reserved">if</span> (typeof context == <span class="literal">"string"</span>) {
|
|
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"context"</span>, [document.getElementById(context)], true);
|
|
} <span class="reserved">else</span> { <span class="comment">// Assuming this is an element</span>
|
|
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"context"</span>, [context], true);
|
|
}
|
|
context = <span class="reserved">this</span>.cfg.getProperty(<span class="literal">"context"</span>);
|
|
}
|
|
|
|
|
|
<span class="comment">// Remove any existing mouseover/mouseout listeners</span>
|
|
<span class="reserved">if</span> (<span class="reserved">this</span>._context) {
|
|
<span class="reserved">for</span> (var c=0;c<<span class="reserved">this</span>._context.length;++c) {
|
|
var el = <span class="reserved">this</span>._context[c];
|
|
YAHOO.util.Event.removeListener(el, <span class="literal">"mouseover"</span>, <span class="reserved">this</span>.onContextMouseOver);
|
|
YAHOO.util.Event.removeListener(el, <span class="literal">"mousemove"</span>, <span class="reserved">this</span>.onContextMouseMove);
|
|
YAHOO.util.Event.removeListener(el, <span class="literal">"mouseout"</span>, <span class="reserved">this</span>.onContextMouseOut);
|
|
}
|
|
}
|
|
|
|
<span class="comment">// Add mouseover/mouseout listeners to context elements</span>
|
|
<span class="reserved">this</span>._context = context;
|
|
<span class="reserved">for</span> (var d=0;d<<span class="reserved">this</span>._context.length;++d) {
|
|
var el2 = <span class="reserved">this</span>._context[d];
|
|
YAHOO.util.Event.addListener(el2, <span class="literal">"mouseover"</span>, <span class="reserved">this</span>.onContextMouseOver, <span class="reserved">this</span>);
|
|
YAHOO.util.Event.addListener(el2, <span class="literal">"mousemove"</span>, <span class="reserved">this</span>.onContextMouseMove, <span class="reserved">this</span>);
|
|
YAHOO.util.Event.addListener(el2, <span class="literal">"mouseout"</span>, <span class="reserved">this</span>.onContextMouseOut, <span class="reserved">this</span>);
|
|
}
|
|
}
|
|
};
|
|
|
|
<span class="comment">// END BUILT-IN PROPERTY EVENT HANDLERS //</span>
|
|
|
|
<span class="comment">// BEGIN BUILT-IN DOM EVENT HANDLERS //</span>
|
|
|
|
<span class="comment">/**
|
|
* The default event handler fired when the user moves the mouse while over the context element.
|
|
* <span class="attrib">@param</span> {DOMEvent} e The current DOM event
|
|
* <span class="attrib">@param</span> {object} obj The object argument
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.onContextMouseMove = <span class="reserved">function</span>(e, obj) {
|
|
obj.pageX = YAHOO.util.Event.getPageX(e);
|
|
obj.pageY = YAHOO.util.Event.getPageY(e);
|
|
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* The default event handler fired when the user mouses over the context element.
|
|
* <span class="attrib">@param</span> {DOMEvent} e The current DOM event
|
|
* <span class="attrib">@param</span> {object} obj The object argument
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.onContextMouseOver = <span class="reserved">function</span>(e, obj) {
|
|
|
|
<span class="reserved">if</span> (obj.hideProcId) {
|
|
clearTimeout(obj.hideProcId);
|
|
obj.hideProcId = null;
|
|
}
|
|
|
|
var context = <span class="reserved">this</span>;
|
|
YAHOO.util.Event.addListener(context, <span class="literal">"mousemove"</span>, obj.onContextMouseMove, obj);
|
|
|
|
<span class="reserved">if</span> (context.title) {
|
|
obj._tempTitle = context.title;
|
|
context.title = <span class="literal">""</span>;
|
|
}
|
|
|
|
<span class="comment">/**
|
|
* The unique process ID associated with the thread responsible for showing the Tooltip.
|
|
* <span class="attrib">@type</span> int
|
|
*/</span>
|
|
obj.showProcId = obj.doShow(e, context);
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* The default event handler fired when the user mouses out of the context element.
|
|
* <span class="attrib">@param</span> {DOMEvent} e The current DOM event
|
|
* <span class="attrib">@param</span> {object} obj The object argument
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.onContextMouseOut = <span class="reserved">function</span>(e, obj) {
|
|
var el = <span class="reserved">this</span>;
|
|
|
|
<span class="reserved">if</span> (obj._tempTitle) {
|
|
el.title = obj._tempTitle;
|
|
obj._tempTitle = null;
|
|
}
|
|
|
|
<span class="reserved">if</span> (obj.showProcId) {
|
|
clearTimeout(obj.showProcId);
|
|
obj.showProcId = null;
|
|
}
|
|
|
|
<span class="reserved">if</span> (obj.hideProcId) {
|
|
clearTimeout(obj.hideProcId);
|
|
obj.hideProcId = null;
|
|
}
|
|
|
|
|
|
obj.hideProcId = setTimeout(<span class="reserved">function</span>() {
|
|
obj.hide();
|
|
}, obj.cfg.getProperty(<span class="literal">"hidedelay"</span>));
|
|
};
|
|
|
|
<span class="comment">// END BUILT-IN DOM EVENT HANDLERS //</span>
|
|
|
|
<span class="comment">/**
|
|
* Processes the showing of the Tooltip by setting the timeout delay and offset of the Tooltip.
|
|
* <span class="attrib">@param</span> {DOMEvent} e The current DOM event
|
|
* <span class="attrib">@return</span> {int} The process ID of the timeout function associated with doShow
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.doShow = <span class="reserved">function</span>(e, context) {
|
|
|
|
var yOffset = 25;
|
|
<span class="reserved">if</span> (<span class="reserved">this</span>.browser == <span class="literal">"opera"</span> && context.tagName == <span class="literal">"A"</span>) {
|
|
yOffset += 12;
|
|
}
|
|
|
|
var me = <span class="reserved">this</span>;
|
|
<span class="reserved">return</span> setTimeout(
|
|
<span class="reserved">function</span>() {
|
|
<span class="reserved">if</span> (me._tempTitle) {
|
|
me.setBody(me._tempTitle);
|
|
} <span class="reserved">else</span> {
|
|
me.cfg.refireEvent(<span class="literal">"text"</span>);
|
|
}
|
|
|
|
me.moveTo(me.pageX, me.pageY + yOffset);
|
|
<span class="reserved">if</span> (me.cfg.getProperty(<span class="literal">"preventoverlap"</span>)) {
|
|
me.preventOverlap(me.pageX, me.pageY);
|
|
}
|
|
|
|
YAHOO.util.Event.removeListener(context, <span class="literal">"mousemove"</span>, me.onContextMouseMove);
|
|
|
|
me.show();
|
|
me.hideProcId = me.doHide();
|
|
},
|
|
<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"showdelay"</span>));
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Sets the timeout for the auto-dismiss delay, which by default is 5 seconds, meaning that a tooltip will automatically dismiss itself after 5 seconds of being displayed.
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.doHide = <span class="reserved">function</span>() {
|
|
var me = <span class="reserved">this</span>;
|
|
<span class="reserved">return</span> setTimeout(
|
|
<span class="reserved">function</span>() {
|
|
me.hide();
|
|
},
|
|
<span class="reserved">this</span>.cfg.getProperty(<span class="literal">"autodismissdelay"</span>));
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Fired when the Tooltip is moved, this event handler is used to prevent the Tooltip from overlapping with its context element.
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.preventOverlap = <span class="reserved">function</span>(pageX, pageY) {
|
|
|
|
var height = <span class="reserved">this</span>.element.offsetHeight;
|
|
|
|
var elementRegion = YAHOO.util.Dom.getRegion(<span class="reserved">this</span>.element);
|
|
|
|
elementRegion.top -= 5;
|
|
elementRegion.left -= 5;
|
|
elementRegion.right += 5;
|
|
elementRegion.bottom += 5;
|
|
|
|
var mousePoint = new YAHOO.util.Point(pageX, pageY);
|
|
|
|
<span class="reserved">if</span> (elementRegion.contains(mousePoint)) {
|
|
<span class="reserved">this</span>.cfg.setProperty(<span class="literal">"y"</span>, (pageY-height-5));
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Returns a string representation of the object.
|
|
* <span class="attrib">@type</span> string
|
|
*/</span>
|
|
YAHOO.widget.Tooltip.<span class="reserved">prototype</span>.toString = <span class="reserved">function</span>() {
|
|
<span class="reserved">return</span> <span class="literal">"Tooltip "</span> + <span class="reserved">this</span>.id;
|
|
};</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="footer">
|
|
<hr />
|
|
Copyright © 2006 Yahoo! Inc. All rights reserved.
|
|
<br /><br />
|
|
Documentation generated by <a href="http://jsdoc.sourceforge.net/">
|
|
JSDoc</a>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|