Page 66 - JavaScript修炼之道

任务24 在表单中提供动态的帮助tooltip 55

把tooltip放在有用的地方

form/tooltips/index.html

<p>
<label for="user_login">
Login*
<span class="tooltip" style="display: none;">
Logins must be unique, at least 3 characters long,
and may only use letters, numbers, white space,
hyphens, underscores and periods.
</span>
</label>
<input type="text" id="user_login" name="user[login]"
class="required text" />
</p>

设置一致、简明的外观样式

form/tooltips/tooltips.css

#registration label { float: left; width: 6em; position: relative; zoom: 1; }
#registration input.text { width: 14em; }
#registration .tooltip {
display: block; position: absolute; left: 24em; top: 0;
padding: 0.35em 0.5em 0.35em 2em; width: 15em;
border: 1px solid silver;
color: gray; font-size: 80%;
background: #ffc url(lightbulb.png) 0.5em 0.3em no-repeat;
}
聚焦时显示，失焦时隐藏

form/tooltips/tooltips.js

document.observe('dom:loaded', function() {
var attr = Prototype.Browser.IE ? 'htmlFor' : 'for';
function showTooltip() {
var tooltip = $$('label['+attr+'="'+this.id+'"] .tooltip').first();
tooltip && tooltip.show();
}
function hideTooltip() {
var tooltip = $$('label['+attr+'="'+this.id+'"] .tooltip').first();
tooltip && tooltip.hide();
}

$('registration').getInputs().invoke('observe', 'focus', showTooltip).
invoke('observe', 'blur', hideTooltip);
});