Page 41 - JavaScript修炼之道

任务12 打造漂亮的tooltip 29

tooltip的HTML代码

ui/tooltips/index.html

<li tabindex="1">
<span class="name">Capacity: 1.5 TB</span>
<div class="tooltip" >
<p><strong>1.5 Terabyte = 1,536 Gigabytes</strong></p>
<p>Enough for 50,000 songs, 1,000 DivX movies, 100,000
high-definition photos, hundreds of iDVD projects and
plenty of backup space left.</p>
</div>
</li>
设置tooltip样式

ui/tooltips/tooltips.css

#files li { position: relative; }
#files li .tooltip {
position: absolute; top: 8px; left: 120px; width: 24em;
z-index: 1; display: none;
/* IE6不识别 li:hover, 所以我们需要用JS触发,
因此避免使用内置的display: none */
_display: block;
border: 1px solid gray;
background: #fffdc3 url(bg_tooltip.png) top left repeat-x;
}
#files li:hover .tooltip,
#files li:focus .tooltip { display: block; }

处理IE6的脚本（IE6中:hover只对链接有效）

ui/tooltips/tooltips.js

function toggle(reveal, e) {
var trigger = e.findElement('li'),
tooltip = trigger && trigger.down('.tooltip');
if (!tooltip) return;
tooltip[reveal ? 'show' : 'hide']();
}

document.observe('dom:loaded', function() {
var isIE6 = Prototype.Browser.IE &&
undefined === document.body.style.maxHeight;
if (!isIE6) return;
var files = $('files'), tooltips = files && files.select('.tooltip');
if (!files || 0 == tooltips.length) return;
tooltips.invoke('hide');
files.observe('mouseover', toggle.curry(true)).
observe('mouseout', toggle.curry(false));
});