<!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>