显示文字、图片等HTML格式的Tooltip

翻译
Kumar Sundaram著A Simple Tooltip With Images And Text

简介

作为一个Web程序开发人员，我们经常需要在我们的页面上显示Tooltip提示框，不过，我希望来一些新的。Tooltip对于页面布局和设计来说应该是非常吸引人，非常精彩的。这是一个Web页面上的简单的Tooltip，可以在其中显示图片、文本及HTML代码。

背景

如果你懂一些Javascript，HTML，和CSS，将会很容易地修改文章的代码。

代码使用

首先，定义一个div。我们可以定义这个tooltip的风格，如透明、字体等等。

然后，给这个元素定义一些属性/事件。
例如，我只希望为一个span显示tooltip，我需要给span加入下面的事件：
onmouseover
onmouseout

<pre lang="html"><span onMouseOver="toolTip('simple Tooltip Text here')" onMouseOut="toolTip()"
    class="Text">Simple Tooltip</span> </pre>

tooltip函数有三个参数，第一个是必须的，指示文字内容。二三参数，可选，分别代表前景、背景颜色。

如果想显示一个图片，或者其它HTML代码，只需要，在第一个参数里，写上对应的HTML代码就OK了。

下面是一个显示图片HTML的tooltip：

<span
    onMouseOver="show()" onMouseOut="toolTip()"
    class="Text">Tooltip with Images and Text</span>

我会在show()函数中，构建HTML脚本，然后，调用tooltip()函数显示tooltip：

function show()
{
    s = '<table width="100%" cellspacing="2" cellpadding="0" border="0">';
    s += '<tr><td><img src="http://upload.wikimedia.org/wikipedia/meta/2/2a/
        Nohat-logo-nowords-bgwhite-200px.jpg" border="0"/> </td>
        <td valign="top">WikiPedia</td></tr>'; 
    s += '<tr><td colspan="2" class="Text">
    <hr/>this is a test for simple tooltip. 
    <br/>You can add text and images to the tooltip</td></tr>';
    s += '</table>'
    toolTip(s)
}

现在，每件事情都差不多了，我们唯一剩下要做的是，让tooltip显示在鼠标位置。

当鼠标在浏览器中移动的时候，我们检测其事件

document.onmousemove = moveToMousePos;

moveToMousePos 函数检测鼠标的坐标，设定div即将显示的位置。因此，当鼠标在span上的时候，tooltip恰好显示在鼠标旁边。

提示

我们可以设置CSS类，来设置文字类型和tooltip的透明度。

.toolTip 
{
    font-family: Verdana, Arial, Sans-serif, 'Times New Roman';
    font-size: 8pt;        
    filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
    /* comment the above 3 lines if you don't want transparency*/
}

你可以在任何element上使用这个tooltip，这里，我只是用span举例。

源码下载：

 /upimg/soft/1_071021035011.zip

（编辑：IT资讯之家 www.it55.com）