--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/overlay/overlay-tooltip.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Simple Tooltip</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+
+ <h1>Example: Simple Tooltip</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><style type="text/css" scoped>
+/* Hide overlay markup while loading, if js is enabled */
+.yui3-js-enabled .yui3-overlay-loading {
+ top:-1000em;
+ left:-1000em;
+ position:absolute;
+}
+
+
+/* Example Layout CSS */
+
+
+</style>
+
+<div class="intro">
+ <p>This example demonstrates a lightweight and flexible setup for display
+ of tooltips.</p>
+ <p>This displays the tooltip adjacent to the cursor
+ and takes advantage of the shim capabilities of <code>Overlay</code>,
+ allowing the tooltip to properly display over <code>select</code> elements in IE.</p>
+</div>
+
+<div class="example">
+ <style>
+ .example .lists {
+ margin: 10px auto; /*center in viewport*/
+ }
+
+ .example .list {
+ -moz-padding-start: 0;
+ -webkit-padding-start: 0;
+ width: 300px;
+ margin: 0;
+ }
+
+ .example #tooltip .yui3-widget-bd{
+ text-align: left;
+ max-width: 15em;
+ *width: 10em;
+ background-color: #FFF6D5;
+ border: solid 1px #aa8;
+ padding: 0.2em 0.5em 0.3em;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
+ -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
+ }
+
+ .example .list li{
+ list-style: none;
+ margin: 0 0 20px;
+ border: 1px solid #C9C9C9;
+ width: 300px;
+ }
+
+ .example .list img{
+ vertical-align: bottom;
+ }
+
+ .example .list .select{
+ padding: 1.5em 0 0.5em;
+ text-indent: 0.5em;
+ background-color: #F7DBB2;
+ }
+
+</style>
+
+<body class="yui3-skin-sam">
+ <div id="tooltip"></div>
+
+ <div class="yui3-g lists">
+ <div class="yui3-u-1-2"> <!-- see CSS Grids -->
+ <ul class="list">
+ <li class="wrench"><img src="../assets/overlay/img/wrench.png"></li>
+ <li class="calipers"><img src="../assets/overlay/img/calipers.png"/></li>
+ <li class="drill"><img src="../assets/overlay/img/drill.png"/></li>
+ <li class="ohm"><img src="../assets/overlay/img/ohm.png"/></li>
+ <li class="level"><img src="../assets/overlay/img/level.png"/></li>
+ </ul>
+ </div>
+ <div class="yui3-u">
+ <ul class="list">
+ <li class="endwrench"><img src="../assets/overlay/img/endwrench.png"/></li>
+ <li class="knife"><img src="../assets/overlay/img/knife.png"/></li>
+ <li class="scissors"><img src="../assets/overlay/img/scissors.png"/></li>
+ <li class="screwdriver"><img src="../assets/overlay/img/screwdriver.png"/></li>
+ <li class="tape"><img src="../assets/overlay/img/tape.png"/></li>
+ <li class="select">Tooltips cover <select><option>select</option></select> elements in IE.</li>
+ </ul>
+ </div>
+ </div>
+
+<script>
+YUI().use('overlay', 'event', 'widget-anim', function (Y) {
+
+ var waitingToShow = false,
+
+ // array for text to be displayed in tooltips
+ tipText = [
+ {'name': 'wrench', 'text': "Avoid dropping on toe."},
+ {'name': 'calipers', 'text': 'Dial calipers: +- .001,<br>human hair .004'},
+ {'name': 'drill', 'text': 'Variable-speed and cordless too.'},
+ {'name': 'ohm', 'text': 'Never test microwaves with a volt-ohm meter.'},
+ {'name': 'level', 'text': 'Unreliable in zero gravity conditions.'},
+ {'name': 'endwrench', 'text': '11/16 box-end wrench A.K.A spanner - (British)'},
+ {'name': 'knife', 'text': 'Wants to roll off table and stick in foot.'},
+ {'name': 'scissors', 'text': "Don't run with these."},
+ {'name': 'screwdriver', 'text': 'Not intended for garden weeding.'},
+ {'name': 'tape', 'text': 'Remove before cutting.'},
+ {'name': 'select', 'text': 'Covering select'}
+ ];
+
+ var tooltip = new Y.Overlay({
+ srcNode: "#tooltip",
+ visible: false
+ }).plug(Y.Plugin.WidgetAnim);
+ tooltip.anim.get('animHide').set('duration', 0.01);
+ tooltip.anim.get('animShow').set('duration', 0.3);
+ tooltip.render();
+
+ // handler that positions and shows the tooltip
+ var onMousemove = function (e) {
+ var i;
+ if (tooltip.get('visible') === false) {
+ // while it's still hidden, move the tooltip adjacent to the cursor
+ Y.one('#tooltip').setStyle('opacity', '0');
+ tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
+ }
+ if (waitingToShow === false) {
+ // wait half a second, then show tooltip
+ setTimeout(function(){
+ Y.one('#tooltip').setStyle('opacity', '1');
+ tooltip.show();
+ }, 500);
+
+ // while waiting to show tooltip, don't let other
+ // mousemoves try to show tooltip too.
+ waitingToShow = true;
+
+ // loop through the tipText array looking for a match between
+ // the class name and the array literal <code>name</code>
+ for (i = 0; i < tipText.length; i += 1) {
+ if (e.currentTarget.hasClass(tipText[i].name)) {
+
+ // found a match, so set the content in the tooltip's body
+ tooltip.setStdModContent('body', tipText[i].text);
+ break;
+ }
+ }
+ }
+ }
+
+ // handler that hides the tooltip
+ var onMouseleave = function (e) {
+
+ // this check prevents hiding the tooltip
+ // when the cursor moves over the tooltip itself
+ if ((e.relatedTarget) && (e.relatedTarget.hasClass('yui3-widget-bd') === false)) {
+ tooltip.hide();
+ waitingToShow = false;
+ }
+ }
+
+ Y.delegate('mousemove', onMousemove, '.lists', 'li');
+ Y.delegate('mouseleave', onMouseleave, '.lists', 'li');
+ Y.one('#tooltip').on('mouseleave', onMouseleave);
+
+});
+</script>
+</body>
+</div>
+
+<h2>Simple Tooltips</h2>
+
+
+
+<h3>The Tooltip Markup</h3>
+
+<p>We just need a <code>div</code> for the tooltip, and some elements that want to
+have tooltips.</p>
+
+<pre class="code prettyprint"><div id="tooltip"></div>
+
+<ul class="list">
+ <li class="wrench"><img src="../assets/overlay/img/wrench.png"/></li>
+ <li class="calipers"><img src="../assets/overlay/img/calipers.png"/></li>
+ <li class="drill"><img src="../assets/overlay/img/drill.png"/></li>
+ <li class="ohm"><img src="../assets/overlay/img/ohm.png"/></li>
+ <li class="level"><img src="../assets/overlay/img/level.png"/></li>
+</ul></pre>
+
+
+<h3>Setting Up the YUI Instance</h3>
+
+<p>We'll use the <code>Overlay</code> module to provide shimming for correctly covering
+<code><select></code> elements in IE. We'll use <code>Event</code> for its <code>onmouseleave</code> event, and
+<code>widget-anim</code> as a plugin to provide the fade-in for the tooltip.
+</p>
+
+<pre class="code prettyprint">YUI().use('overlay', 'event', 'widget-anim', function (Y) {
+ // code will go here.
+});</pre>
+
+<h3>Declare some variables</h3>
+
+<p>These variables include an array of strings for various tooltips.
+If a DOM element has a class matching one of the <code>name</code> values in the <code>tipText</code> array,
+it will display the corresponding text value in its tooltip when the cursor moves
+over it.
+</p>
+
+<pre class="code prettyprint">var waitingToShow = false,
+
+ // array for text to be displayed in tooltips
+ tipText = [
+ {'name': 'wrench', 'text': "Avoid dropping on toe."},
+ {'name': 'calipers', 'text': 'Dial calipers: +- .001,<br>human hair .004'},
+ {'name': 'drill', 'text': 'Variable-speed and cordless too.'},
+ {'name': 'ohm', 'text': 'Never test microwaves with a volt-ohm meter.'},
+ {'name': 'level', 'text': 'Unreliable in zero gravity conditions.'}
+ // the array continues...
+ ];</pre>
+
+
+<h3>Instantiating The Tooltip</h3>
+
+<p>To create an overlay instance for the tooltip,
+we use the overlay constructor <code>Y.Overlay</code>, specifying the source node
+as the selector of the tooltip element.
+</p>
+
+<pre class="code prettyprint">var tooltip = new Y.Overlay({
+ srcNode: "#tooltip",
+ visible: false
+}).plug(Y.Plugin.WidgetAnim);
+tooltip.anim.get('animHide').set('duration', 0.01);
+tooltip.anim.get('animShow').set('duration', 0.3);
+tooltip.render();</pre>
+
+
+<h3>Event Handlers</h3>
+
+<p>
+Create event handlers for the mouse events
+and place them above the listeners code.
+</p>
+<pre class="code prettyprint">// handler that positions and shows the tooltip
+var onMousemove = function (e) {
+ var i;
+ if (tooltip.get('visible') === false) {
+ // while it's still hidden, move the tooltip adjacent to the cursor
+ Y.one('#tooltip').setStyle('opacity', '0');
+ tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
+ }
+ if (waitingToShow === false) {
+ // wait half a second, then show tooltip
+ setTimeout(function(){
+ Y.one('#tooltip').setStyle('opacity', '1');
+ tooltip.show();
+ }, 500);
+
+ // while waiting to show tooltip, don't let other
+ // mousemoves try to show tooltip too.
+ waitingToShow = true;
+
+ // loop through the tipText array looking for a match between
+ // the class name and the array literal `name`
+ for (i = 0; i < tipText.length; i += 1) {
+ if (e.currentTarget.hasClass(tipText[i].name)) {
+
+ // found a match, so set the content in the tooltip's body
+ tooltip.setStdModContent('body', tipText[i].text);
+ break;
+ }
+ }
+ }
+}
+
+// handler that hides the tooltip
+var onMouseleave = function (e) {
+
+ // this check prevents hiding the tooltip
+ // when the cursor moves over the tooltip itself
+ if ((e.relatedTarget) && (e.relatedTarget.hasClass('yui3-widget-bd') === false)) {
+ tooltip.hide();
+ waitingToShow = false;
+ }
+}</pre>
+
+
+
+<h3>Event Listeners</h3>
+
+<p>
+Add listeners for <code>mousemove</code> and <code>mouseout</code> events
+to whatever elements you want to have tooltips.
+Using <code>mousemove</code> instead of <code>mouseover</code>, and using a <code>delay</code> in the <code>transition</code>
+makes the tooltip fade in adjacent to the cursor.
+See <a href="../event/index.html#delegation">event delegation</a> for efficient
+event subscribing to multiple elements.
+</p>
+
+<pre class="code prettyprint">Y.delegate('mousemove', onMousemove, '.lists', 'li');
+Y.delegate('mouseleave', onMouseleave, '.lists', 'li');
+Y.one('#tooltip').on('mouseleave', onMouseleave);</pre>
+
+<p>
+This example demonstrates how you can use the existing Overlay component
+to create a one-off Tooltip for your page.
+If you plan to re-use the Tooltip on multiple pages,
+or in a variety of use cases, it's a good idea to encapsulate
+all the code which makes a tooltip work into a reusable Widget class.
+The example,
+<a href="../widget/widget-tooltip.html">Creating a Simple Tooltip Widget with Extensions</a>,
+shows how you can create a reusable, flexible Tooltip class.
+</p>
+
+<h3>Complete Example Source</h3>
+<pre class="code prettyprint"><style>
+ .example .lists {
+ margin: 10px auto; /*center in viewport*/
+ }
+
+ .example .list {
+ -moz-padding-start: 0;
+ -webkit-padding-start: 0;
+ width: 300px;
+ margin: 0;
+ }
+
+ .example #tooltip .yui3-widget-bd{
+ text-align: left;
+ max-width: 15em;
+ *width: 10em;
+ background-color: #FFF6D5;
+ border: solid 1px #aa8;
+ padding: 0.2em 0.5em 0.3em;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
+ -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
+ }
+
+ .example .list li{
+ list-style: none;
+ margin: 0 0 20px;
+ border: 1px solid #C9C9C9;
+ width: 300px;
+ }
+
+ .example .list img{
+ vertical-align: bottom;
+ }
+
+ .example .list .select{
+ padding: 1.5em 0 0.5em;
+ text-indent: 0.5em;
+ background-color: #F7DBB2;
+ }
+
+</style>
+
+<body class="yui3-skin-sam">
+ <div id="tooltip"></div>
+
+ <div class="yui3-g lists">
+ <div class="yui3-u-1-2"> <!-- see CSS Grids -->
+ <ul class="list">
+ <li class="wrench"><img src="../assets/overlay/img/wrench.png"></li>
+ <li class="calipers"><img src="../assets/overlay/img/calipers.png"/></li>
+ <li class="drill"><img src="../assets/overlay/img/drill.png"/></li>
+ <li class="ohm"><img src="../assets/overlay/img/ohm.png"/></li>
+ <li class="level"><img src="../assets/overlay/img/level.png"/></li>
+ </ul>
+ </div>
+ <div class="yui3-u">
+ <ul class="list">
+ <li class="endwrench"><img src="../assets/overlay/img/endwrench.png"/></li>
+ <li class="knife"><img src="../assets/overlay/img/knife.png"/></li>
+ <li class="scissors"><img src="../assets/overlay/img/scissors.png"/></li>
+ <li class="screwdriver"><img src="../assets/overlay/img/screwdriver.png"/></li>
+ <li class="tape"><img src="../assets/overlay/img/tape.png"/></li>
+ <li class="select">Tooltips cover <select><option>select</option></select> elements in IE.</li>
+ </ul>
+ </div>
+ </div>
+
+<script>
+YUI().use('overlay', 'event', 'widget-anim', function (Y) {
+
+ var waitingToShow = false,
+
+ // array for text to be displayed in tooltips
+ tipText = [
+ {'name': 'wrench', 'text': "Avoid dropping on toe."},
+ {'name': 'calipers', 'text': 'Dial calipers: +- .001,<br>human hair .004'},
+ {'name': 'drill', 'text': 'Variable-speed and cordless too.'},
+ {'name': 'ohm', 'text': 'Never test microwaves with a volt-ohm meter.'},
+ {'name': 'level', 'text': 'Unreliable in zero gravity conditions.'},
+ {'name': 'endwrench', 'text': '11/16 box-end wrench A.K.A spanner - (British)'},
+ {'name': 'knife', 'text': 'Wants to roll off table and stick in foot.'},
+ {'name': 'scissors', 'text': "Don't run with these."},
+ {'name': 'screwdriver', 'text': 'Not intended for garden weeding.'},
+ {'name': 'tape', 'text': 'Remove before cutting.'},
+ {'name': 'select', 'text': 'Covering select'}
+ ];
+
+ var tooltip = new Y.Overlay({
+ srcNode: "#tooltip",
+ visible: false
+ }).plug(Y.Plugin.WidgetAnim);
+ tooltip.anim.get('animHide').set('duration', 0.01);
+ tooltip.anim.get('animShow').set('duration', 0.3);
+ tooltip.render();
+
+ // handler that positions and shows the tooltip
+ var onMousemove = function (e) {
+ var i;
+ if (tooltip.get('visible') === false) {
+ // while it's still hidden, move the tooltip adjacent to the cursor
+ Y.one('#tooltip').setStyle('opacity', '0');
+ tooltip.move([(e.pageX + 10), (e.pageY + 20)]);
+ }
+ if (waitingToShow === false) {
+ // wait half a second, then show tooltip
+ setTimeout(function(){
+ Y.one('#tooltip').setStyle('opacity', '1');
+ tooltip.show();
+ }, 500);
+
+ // while waiting to show tooltip, don't let other
+ // mousemoves try to show tooltip too.
+ waitingToShow = true;
+
+ // loop through the tipText array looking for a match between
+ // the class name and the array literal `name`
+ for (i = 0; i < tipText.length; i += 1) {
+ if (e.currentTarget.hasClass(tipText[i].name)) {
+
+ // found a match, so set the content in the tooltip's body
+ tooltip.setStdModContent('body', tipText[i].text);
+ break;
+ }
+ }
+ }
+ }
+
+ // handler that hides the tooltip
+ var onMouseleave = function (e) {
+
+ // this check prevents hiding the tooltip
+ // when the cursor moves over the tooltip itself
+ if ((e.relatedTarget) && (e.relatedTarget.hasClass('yui3-widget-bd') === false)) {
+ tooltip.hide();
+ waitingToShow = false;
+ }
+ }
+
+ Y.delegate('mousemove', onMousemove, '.lists', 'li');
+ Y.delegate('mouseleave', onMouseleave, '.lists', 'li');
+ Y.one('#tooltip').on('mouseleave', onMouseleave);
+
+});
+</script>
+</body></pre>
+
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support.">
+ <a href="overlay-xy.html">Basic XY Positioning</a>
+ </li>
+
+
+
+ <li data-description="Shows how to create a simple tooltip incorporating the overlay shim feature.">
+ <a href="overlay-tooltip.html">Simple Tooltip</a>
+ </li>
+
+
+
+ <li data-description="Shows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to the viewport.">
+ <a href="overlay-align.html">Alignment Support</a>
+ </li>
+
+
+
+ <li data-description="Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page.">
+ <a href="overlay-stack.html">Stack Support</a>
+ </li>
+
+
+
+ <li data-description="Shows how to modify content in the Overlay's header, body and footer sections.">
+ <a href="overlay-stdmod.html">Standard Module Support</a>
+ </li>
+
+
+
+ <li data-description="Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay.">
+ <a href="overlay-constrain.html">Constrain Support</a>
+ </li>
+
+
+
+ <li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility.">
+ <a href="overlay-io-plugin.html">IO Plugin</a>
+ </li>
+
+
+
+ <li data-description="Shows how to create a simple plugin to animate the Overlay's movement and visibility.">
+ <a href="overlay-anim-plugin.html">Animation Plugin</a>
+ </li>
+
+
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
+ <a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a>
+ </li>
+
+
+
+ <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
+ <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/overlay',
+ name: 'overlay-tooltip',
+ title: 'Simple Tooltip',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('overlay-xy');
+YUI.Env.Tests.examples.push('overlay-tooltip');
+YUI.Env.Tests.examples.push('overlay-align');
+YUI.Env.Tests.examples.push('overlay-stack');
+YUI.Env.Tests.examples.push('overlay-stdmod');
+YUI.Env.Tests.examples.push('overlay-constrain');
+YUI.Env.Tests.examples.push('overlay-io-plugin');
+YUI.Env.Tests.examples.push('overlay-anim-plugin');
+YUI.Env.Tests.examples.push('node-focusmanager-button');
+YUI.Env.Tests.examples.push('stylesheet-theme');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>