如何使用这个脚本
1、下载库
下载 wz_tooltip.zip(网站http://www.walterzorn.com/) 并解压,按 LGPL 发布。
2、将 wz_tooltip.js 连接到 HTML 文件中
复制下面的行到 BODY 节中,最好是紧跟在开标签 <body> 后面。
<script type="text/javascript" src="wz_tooltip.js"></script>
如果必要,修改路径 src="wz_tooltip.js" 为 JavaScript 文件。注意:使用下载的文件,不要强行链接我站(指 walterzorn 网站)的 wz_tooltip.js 文件。
3、在 onmouseover 事件处理程序中标明工具提示文字
每一个显示工具提示的 html 标签需要 onmouseover 和 onmouseout 属性,如下:
<a href="index.htm" onmouseover="Tip('Some text')" onmouseout="UnTip()">Homepage </a>
就这样,没有 title 属性,没有包含 DIV。你可以看到,显示的文字必须用单引号引起来,然后传递给 Tip() 函数。注意:工具提示文字中的每个单引号(撇号)必须用反斜杠转义。比如:
Tip('This text won\'t trigger a JavaScript error.');
在 onmouseout 事件处理程序中调用 UnTip() 来再次隐藏工具提示。
当然你也可以为 Tip() 和/或 UnTip() 使用不同的事件处理程序。
扩展配置
4、选择:将 HTML 元素转换到工具提示中
为了代替直接在工具提示中使用文字,你可以标识特定的 HTML 元素以将其转换到工具提示中。在某些方面这是有益的。
•你可以在工具条中拥有十分重要的东西,而一个页面的 HTML 内容(不是 JavaScript 内容)对网络搜索引擎是有益的。

如果在网页中放置恰当,对于禁用了 JavaScript 的用户来说,这些内容仍然是可见的。
•同样,HTML 元素也可以一直显示;比如,如果你想在不同的地方的工具提示中显示它的内容。
•这样可以轻松地定义 HTML 元素然后直接转换成工具提示中复杂的 HTML,比 JavaScript 字符串轻松多了。
要定义用 HTML 创建的工具提示,只需要通过 TipToTip() 函数把想要的 HTML 标签的 ID 传过去。示例:
<a href="index.htm" onmouseover="TagToTip('Span2')" onmouseout="UnTip()">Home page </a>
...
<span >HTML element to show the tooltip on</span>
•FOLLOWMOUSE 鼠标跟随。值:true 或 false。
•FONTCOLOR 字体颜色。
•FONTFACE 字体名称。
•FONTSIZE 字体大小。值:带单位的大小。
•FONTWEIGHT 字体加重。值:'normal' or 'bold'。
•HEIGHT 工具提示的高度。值:任意数值。
•JUMPHORZ 如果为 true,工具提示碰触到窗口边缘时,跳转到水平方向的另一边。
•JUMPVERT 如果为 true,工具提示碰触到窗口边缘时,跳转到竖直方向的另一边。
•LEFT 工具提示在鼠标指针的左边。值:true 或 false。
•OFFSETX 在鼠标指针上的水平偏移。
•OFFSETY 在鼠标指针上的竖直偏移。
•OPACITY 透明度。值:0-100,0 完全透明。
•PADDING 工具提示的内边距。值:数值 >= 0。
•SHADOW 是否显示阴影。
•SHADOWCOLOR 阴影颜色。
•SHADOWWIDTH 阴影大小。值:数值 >= 0。
•STICKY 工具提示一直停在其初始位置,直到另一个工具提示触发。值:true 或 false。
•TEXTALIGN 文字排列方式。
•TITLE 显示标题栏。值:标题文字。
•TITLEALIGN 标题文字排列方式。
•TITLEBGCOLOR 标题背景颜色。
•TITLEFONTCOLOR 标题字体颜色。
•TITLEFONTFACE 标题字体名称。
•TITLEFONTSIZE 标题字体大小。值:带单位的大小。
•TLEPADDING 标题的内边距。值:数值 >= 0。
•WIDTH  工具提示的宽度。值:任意数值。

相关文章:

  • 2021-10-25
  • 2021-10-30
  • 2021-12-15
  • 2021-05-21
  • 2021-08-29
  • 2021-07-27
  • 2022-02-04
  • 2021-08-22
猜你喜欢
  • 2022-12-23
  • 2021-09-27
  • 2021-06-13
  • 2021-07-27
  • 2021-11-06
  • 2021-07-22
  • 2021-08-13
相关资源
相似解决方案