带图像和文本的简单工具提示

• 下载源码 - 1.9 KB

引言

作为 Web 程序员，我们需要经常在页面上显示工具提示，但不能以过时的方式。工具提示应该对页面布局和设计具有吸引力且微妙。

大多数时候，我们都会使用现有的开源脚本，这些脚本都是免费的。我也这样做，直到我意识到自定义一个免费的代码片段需要更多时间，所以我决定自己写一个简单的。

背景

一点点 JavaScript、HTML 和 CSS 经验将帮助你修改脚本以满足你的需求。

使用代码

编写一个工具提示非常简单。这是一个适用于我们网页的简单工具提示，代码量最少。图片、文本和 HTML 代码都可以在工具提示中显示。

首先，我们必须定义一个 div，它将作为我们的工具提示使用。使用 div 将帮助我们在工具提示中显示图像、HTML 代码等。

我们可以定义工具提示的样式，例如透明度、字体等。

一旦工具提示 div 准备就绪，我们必须为要使用此工具提示的元素添加一些属性/事件。

例如，我想为 span 仅显示文本工具提示。然后我需要将以下内容添加到 span 中。

1. onmouseover
2. onmouseout

这两个事件用于在鼠标悬停在 span 上时显示工具提示，并在鼠标移出 span 时隐藏工具提示。

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

对于工具提示函数，需要传递三个参数。第一个参数是必需的，在其中我们将传递要为工具提示显示的文本。

第二个和第三个参数是可选的。它们分别是前景色和背景色。如果省略这两个参数，则将使用默认颜色。

要在工具提示中显示图像或显示带有 HTML 标记的格式化消息，我们可以首先形成一个 HTML 字符串，然后将其传递给工具提示函数。就是这样。

工具提示将具有格式化的文本和图像。对此不需要特殊的代码。div 标签完成了我们需要显示的所有内容（图像、HTML 字符串等）。

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

为了格式化，我使用一个单独的函数 show() 以避免在使用 HTML 字符串时混淆并保持可读性。在 show() 中，我们可以格式化字符串，添加文本、图像等，这些都是工具提示所需要的。你可以使用你自己的函数或在 onmouseover = "" 中使用内联代码。

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)
}

现在一切都准备好了。我们将看看工具提示是如何在鼠标位置显示的。

每当鼠标在文档中移动时，我们都会使用 document.onmousemove = moveToMousePos; 检测事件

这将把工具提示放置在鼠标的当前位置。moveToMousePos 函数将检测鼠标坐标并设置工具提示 div 的左上角位置。因此，当鼠标悬停在 span 上时，我们希望显示工具提示，然后工具提示的 display 属性将设置为 block，而移出时，display 属性设置为 none。

注意

1. 我们可以使用 CSS 类设置工具提示的字体样式和不透明度
   

   .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*/
   } 

2. 我们可以插入带有表格的 HTML，以获得更好的格式化输出/工具提示外观。但不要包含 HTML 和 body 标签。
3. 我们可以为任何 HTML 元素添加此工具提示。在这个例子中，我使用了 span 标签。