jstooltip之wz_tooltip使用方法和参数备忘

1、下载库

下载 wz_tooltip.zip(网站http://www.walterzorn.com/) 并解压&＃xff0c;按 LGPL 发布。 在梁龙的博客上下载&＃xff1a; wz_tooltip.zip

2、将 wz_tooltip.js 连接到 HTML 文件中 
复制下面的行到 BODY 节中&＃xff0c;最好是紧跟在开标签 后面。 
 
如果必要&＃xff0c;修改路径 src&＃61;"wz_tooltip.js" 为 Javascript 文件。注意&＃xff1a;使用下载的文件&＃xff0c;不要强行链接我站&＃xff08;指 walterzorn 网站&＃xff09;的 wz_tooltip.js 文件。 

3、在 onmouseover 事件处理程序中标明工具提示文字 
每一个显示工具提示的 html 标签需要 onmouseover 和 onmouseout 属性&＃xff0c;如下&＃xff1a; 
Homepage  
就这样&＃xff0c;没有 title 属性&＃xff0c;没有包含 DIV。你可以看到&＃xff0c;显示的文字必须用单引号引起来&＃xff0c;然后传递给 Tip() 函数。注意&＃xff1a;工具提示文字中的每个单引号&＃xff08;撇号&＃xff09;必须用反斜杠转义。比如&＃xff1a; 
Tip(&＃39;This text won\&＃39;t trigger a Javascript error.&＃39;); 
在 onmouseout 事件处理程序中调用 UnTip() 来再次隐藏工具提示。 
当然你也可以为 Tip() 和/或 UnTip() 使用不同的事件处理程序。 
扩展配置 

4、选择&＃xff1a;将 HTML 元素转换到工具提示中 
为了代替直接在工具提示中使用文字&＃xff0c;你可以标识特定的 HTML 元素以将其转换到工具提示中。在某些方面这是有益的。 

?你可以在工具条中拥有十分重要的东西&＃xff0c;而一个页面的 HTML 内容&＃xff08;不是 Javascript 内容&＃xff09;对网络搜索引擎是有益的。 
? 如果在网页中放置恰当&＃xff0c;对于禁用了 Javascript 的用户来说&＃xff0c;这些内容仍然是可见的。 
?同样&＃xff0c;HTML 元素也可以一直显示&＃xff1b;比如&＃xff0c;如果你想在不同的地方的工具提示中显示它的内容。 
?这样可以轻松地定义 HTML 元素然后直接转换成工具提示中复杂的 HTML&＃xff0c;比 Javascript 字符串轻松多了。 
要定义用 HTML 创建的工具提示&＃xff0c;只需要通过 TipToTip() 函数把想要的 HTML 标签的 ID 传过去。示例&＃xff1a; 
Home page  
... 
This is some comment
about my home page 
在这个示例中&＃xff0c;链接上的工具提示将显示从 元素抓取的内容。注意只是包括换行标签的内部内容会被拷贝&＃xff0c;而 SPAN 标签本身和任何它上面的版式不会被拷贝。 
当页面正在读取时&＃xff0c;Tooltip Library 自动隐藏转换为工具提示的 HTML 元素&＃xff08;比如&＃xff1a;上面示例中的 元素&＃xff09;。要隐藏自动隐藏我&＃xff0c;在 wz_tooltip.js 的全局工具提示配置文件中设置 TagsToTip 变量为 false&＃xff08;预设默认值&＃xff1a;true&＃xff09;。 如果喜欢&＃xff0c;你也可以通过设置它们的 CSS &＃39;display&＃39; 属性为 &＃39;none&＃39; 来自行隐藏这些 HTML 元素。 
另一方面的提示&＃xff1a;特别是在 IE 中&＃xff0c;关闭自动隐藏特性会获得更好的页面读取展现效果。 

5、工具提示中的 HTML 

在工具提示中使用图像&＃xff0c;必须在 标签中标明 width 和 height 属性。以便让脚本准确测量工具提示的大小。 
工 具提示文字中的双引号必须以 HTML 字符实体&＃xff08;"e;&＃xff09;的形式来写&＃xff0c;这是因为双引号已经作为 onmouseover 事件处理程序的定义字符&＃xff0c;并且不能被嵌套。撇号&＃xff08;单引号&＃xff09;必须用前斜杠转义&＃xff0c;因为撇号已经作为工具提示文字的定义字符。工具提示文字中的 HTML 标签属性定义字符&＃xff0c;你可以使用 " 或 \&＃39;。比如&＃xff1a; 
正确&＃xff1a; 
image.&＃39;)" οnmοuseοut&＃61;"UnTip()"> Homepage  
or 
image.&＃39;)" οnmοuseοut&＃61;"UnTip()"> Homepage  

错误&＃xff1a; 
image.&＃39;)" οnmοuseοut&＃61;"UnTip()"> Homepage  
6、用 CSS 类格式工具提示 

用 CSS 类可以简单地转换 DIV 或 SPAN 元素中的工具提示文字。你可以把标题文字做成一样&＃xff08;关于如何定义工具提示标题&＃xff0c;请参见下面的命令参考中 TITLE 命令描述&＃xff09;。示例&＃xff1a; 
... οnmοuseοver&＃61;"Tip(&＃39;

Text of tooltip number one

&＃39;)" ... 
... οnmοuseοver&＃61;"Tip(&＃39;Text of tooltip number two&＃39;)" ... 
... οnmοuseοver&＃61;"Tip(&＃39;Tooltip number 3&＃39;, TITLE, &＃39;

Some Title

&＃39;)" ...

7、通过变量或函数调用获得工具提示内容 
为 了代替用单引号结束字符串&＃xff0c;Tip() 很好地接受其它地方定义的变量或调用一个函数&＃xff0c;比如  
 
 
 
... 
Link 1 
... 
Link 2 
... 
Link 3 
... 
 

8、用命令单独自定义工具提示 
全 局默认配置对所有的工具提示有效&＃xff0c;可以在 Javascript 文件中改变它&＃xff0c;位于 GLOBAL TOOLTIP CONFIGURATION 一节。要单独配置工具提示&＃xff0c;你可以使用下面列出的命令。这些独立的命令重写 wz_tooltip.js 中的全局配置。它们可以通过 onmouseover 事件处理程序的 Tip() 或 TagToTip() 函数传递。每一个命令必须带有值&＃xff0c;用逗号隔开&＃xff1a; 
οnmοuseοver&＃61;"Tip(&＃39;Some text&＃39;, ABOVE, true)" 
或者 
οnmοuseοver&＃61;"TagToTip(&＃39;SomeID&＃39;, TITLEFONTCOLOR, &＃39;#CCFFCC&＃39;)" 
多个命令构成一个逗号分隔的命令&＃xff0d;值对列表。 命令顺序无所谓。示例&＃xff1a;

οnmοuseοver&＃61;"Tip(&＃39;Some tooltip text&＃39;, SHADOW, true, TITLE, &＃39;Some Title&＃39;, PADDING, 9)" 
?ABOVE 工具提示在鼠标指针的下边。值&＃xff1a;true 或 false。 
?BGCOLOR 工具提示背景颜色。值&＃xff1a;HTML 颜色&＃xff0c;用单引号&＃xff0c;比如 &＃39;#D3E3F6&＃39; 或 &＃39;DarkCyan&＃39;&＃xff0c;或空字符串 &＃39;&＃39; 作为无背景。 
?BGIMG 背景图片。 
?BORDERCOLOR 边框颜色。值&＃xff1a;HTML 颜色。 
?BORDERSTYLE 边框样式。值&＃xff1a;CSS 边框样式。 
?BORDERWIDTH 工具提示边框粗细。值&＃xff1a;数值 >&＃61; 0&＃xff0c;默认 1。 
?CENTERMOUSE 鼠标位于工具提示的中间。 
?CLICKCLOSE 用户在工具提示或文档中单击鼠标时关闭工具提示。值&＃xff1a;true 或 false。 
?CLICKSTICKY 用户点击触发工具提示的元素时仍然显示工具提示。 
?CLOSEBTN 在标题栏中显示关闭按钮。值&＃xff1a;true 或 false。 
?CLOSEBTNCOLORS 关闭按钮的颜色。数组&＃xff0c;分别为&＃xff1a;背景色、文字色、鼠标移上时高亮背景色、鼠标移上时高亮文字颜色。如&＃xff1a;[&＃39;&＃39;, &＃39;#66ff66&＃39;, &＃39;white&＃39;, &＃39;#00cc00&＃39;]。 
?CLOSEBTNTEXT 关闭按钮文字。比如 &＃39;Click Me&＃39;。 
?COPYCONTENT 只对 TagToTip() 有效&＃xff0c;表示是否把 HTML 元素复制到工具提示&＃xff0c;若为 false&＃xff0c;表示移动到。如果是复制到&＃xff0c;其中 input 的 value 都将得到保持。 
?DELAY 延迟多少显示工具提示。毫秒。值&＃xff1a;数值 >&＃61; 0。 
?DURATION 延迟多少的时间工具提示隐藏。毫秒。 
?EXCLUSIVE 只有当前工具提示隐藏后才显示其它工具提示。值&＃xff1a;true 或 false。 
?FADEIN 渐显&＃xff0c;某些浏览器不支持。值&＃xff1a;数值 >&＃61; 0。 
?FADEOUT 渐隐&＃xff0c;某些浏览器不支持。值&＃xff1a;数值 >&＃61; 0。 
?Fix&＃xff08;模式 1&＃xff09; 在修定的 [x,y] 坐标显示工具提示&＃xff0c;如&＃xff1a;[230, 874]。 
?Fix&＃xff08;模 式 2&＃xff09; 在任何 HTML 元素上显示工具提示&＃xff0c;即使是在另一个工具提示中。... οnmοuseοver&＃61;"Tip(&＃39;Some text&＃39;, FIX, [&＃39;PurpleSpan&＃39;, 0, 5])" ... HTML element to show the tooltip on 
?FOLLOWMOUSE 鼠标跟随。值&＃xff1a;true 或 false。 
?FONTCOLOR 字体颜色。 
?FONTFACE 字体名称。 
?FONTSIZE 字体大小。值&＃xff1a;带单位的大小。 
?FONTWEIGHT 字体加重。值&＃xff1a;&＃39;normal&＃39; or &＃39;bold&＃39;。 
?HEIGHT 工具提示的高度。值&＃xff1a;任意数值。 
?JUMPHORZ 如果为 true&＃xff0c;工具提示碰触到窗口边缘时&＃xff0c;跳转到水平方向的另一边。 
?JUMPVERT 如果为 true&＃xff0c;工具提示碰触到窗口边缘时&＃xff0c;跳转到竖直方向的另一边。 
?LEFT 工具提示在鼠标指针的左边。值&＃xff1a;true 或 false。 
?OFFSETX 在鼠标指针上的水平偏移。 
?OFFSETY 在鼠标指针上的竖直偏移。 
?OPACITY 透明度。值&＃xff1a;0-100&＃xff0c;0 完全透明。 
?PADDING 工具提示的内边距。值&＃xff1a;数值 >&＃61; 0。 
?SHADOW 是否显示阴影。 
?SHADOWCOLOR 阴影颜色。 
?SHADOWWIDTH 阴影大小。值&＃xff1a;数值 >&＃61; 0。 
?STICKY 工具提示一直停在其初始位置&＃xff0c;直到另一个工具提示触发。值&＃xff1a;true 或 false。 
?TEXTALIGN 文字排列方式。 
?TITLE 显示标题栏。值&＃xff1a;标题文字。 
?TITLEALIGN 标题文字排列方式。 
?TITLEBGCOLOR 标题背景颜色。 
?TITLEFONTCOLOR 标题字体颜色。 
?TITLEFONTFACE 标题字体名称。 
?TITLEFONTSIZE 标题字体大小。值&＃xff1a;带单位的大小。 
?TLEPADDING 标题的内边距。值&＃xff1a;数值 >&＃61; 0。 
?WIDTH  工具提示的宽度。值&＃xff1a;任意数值。