wz_tooltip使用备忘

1、下载库

下载 wz_tooltip.zip(网站) 并解压，按 LGPL 发布。

2、将 wz_tooltip.js 连接到 HTML 文件中

复制下面的行到 BODY 节中，最好是紧跟在开标签 后面。


如果必要，修改路径 src="wz_tooltip.js" 为 JavaScript 文件。注意：使用下载的文件，不要强行链接我站（指 walterzorn 网站）的 wz_tooltip.js 文件。

3、在 onmouseover 事件处理程序中标明工具提示文字

每一个显示工具提示的 html 标签需要 onmouseover 和 onmouseout 属性，如下：

Homepage
就这样，没有 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 传过去。示例：

Home page
...
This is some comment
about my home page
...
在这个示例中，链接上的工具提示将显示从 元素抓取的内容。注意只是包括换行标签的内部内容会被拷贝，而 SPAN 标签本身和任何它上面的版式不会被拷贝。

当页面正在读取时，Tooltip Library 自动隐藏转换为工具提示的 HTML 元素（比如：上面示例中的 元素）。要隐藏自动隐藏我，在 wz_tooltip.js 的全局工具提示配置文件中设置 TagsToTip 变量为 false（预设默认值：true）。 如果喜欢，你也可以通过设置它们的 CSS 'display' 属性为 'none' 来自行隐藏这些 HTML 元素。

另一方面的提示：特别是在 IE 中，关闭自动隐藏特性会获得更好的页面读取展现效果。

5、工具提示中的 HTML

在工具提示中使用图像，必须在 标签中标明 width 和 height 属性。以便让脚本准确测量工具提示的大小。

工具提示文字中的双引号必须以 HTML 字符实体（"e;）的形式来写，这是因为双引号已经作为 onmouseover 事件处理程序的定义字符，并且不能被嵌套。撇号（单引号）必须用前斜杠转义，因为撇号已经作为工具提示文字的定义字符。工具提示文字中的 HTML 标签属性定义字符，你可以使用 " 或 \'。比如：

正确：
Homepage
or
Homepage

错误：
image.')" onmouseout="UnTip()"> Homepage
6、用 CSS 类格式工具提示

用 CSS 类可以简单地转换 DIV 或 SPAN 元素中的工具提示文字。你可以把标题文字做成一样（关于如何定义工具提示标题，请参见下面的命令参考中 TITLE 命令描述）。示例：

... onmouseover="Tip('

Text of tooltip number one

')" ...
... onmouseover="Tip('Text of tooltip number two')" ...
... onmouseover="Tip('Tooltip number 3', TITLE, '

Some Title

')" ...
7、通过变量或函数调用获得工具提示内容

为了代替用单引号结束字符串，Tip() 很好地接受其它地方定义的变量或调用一个函数，比如



...
Link 1
...
Link 2
...
Link 3
...


8、用命令单独自定义工具提示

全局默认配置对所有的工具提示有效，可以在 JavaScript 文件中改变它，位于 GLOBAL TOOLTIP CONFIGURATION 一节。要单独配置工具提示，你可以使用下面列出的命令。这些独立的命令重写 wz_tooltip.js 中的全局配置。它们可以通过 onmouseover 事件处理程序的 Tip() 或 TagToTip() 函数传递。每一个命令必须带有值，用逗号隔开：

onmouseover="Tip('Some text', ABOVE, true)"
或者
onmouseover="TagToTip('SomeID', TITLEFONTCOLOR, '#CCFFCC')"
多个命令构成一个逗号分隔的命令－值对列表。 命令顺序无所谓。示例：

onmouseover="Tip('Some tooltip text', SHADOW, true, TITLE, 'Some Title', PADDING, 9)"
?ABOVE 工具提示在鼠标指针的下边。值：true 或 false。
?BGCOLOR 工具提示背景颜色。值：HTML 颜色，用单引号，比如 '#D3E3F6' 或 'DarkCyan'，或空字符串 '' 作为无背景。
?BGIMG 背景图片。
?BORDERCOLOR 边框颜色。值：HTML 颜色。
?BORDERSTYLE 边框样式。值：CSS 边框样式。
?BORDERWIDTH 工具提示边框粗细。值：数值 >= 0，默认 1。
?CENTERMOUSE 鼠标位于工具提示的中间。
?CLICKCLOSE 用户在工具提示或文档中单击鼠标时关闭工具提示。值：true 或 false。
?CLICKSTICKY 用户点击触发工具提示的元素时仍然显示工具提示。
?CLOSEBTN 在标题栏中显示关闭按钮。值：true 或 false。
?CLOSEBTNCOLORS 关闭按钮的颜色。数组，分别为：背景色、文字色、鼠标移上时高亮背景色、鼠标移上时高亮文字颜色。如：['', '#66ff66', 'white', '#00cc00']。
?CLOSEBTNTEXT 关闭按钮文字。比如 'Click Me'。
?COPYCONTENT 只对 TagToTip() 有效，表示是否把 HTML 元素复制到工具提示，若为 false，表示移动到。如果是复制到，其中 input 的 value 都将得到保持。
?DELAY 延迟多少显示工具提示。毫秒。值：数值 >= 0。
?DURATION 延迟多少的时间工具提示隐藏。毫秒。
?EXCLUSIVE 只有当前工具提示隐藏后才显示其它工具提示。值：true 或 false。
?FADEIN 渐显，某些浏览器不支持。值：数值 >= 0。
?FADEOUT 渐隐，某些浏览器不支持。值：数值 >= 0。
?Fix（模式 1） 在修定的 [x,y] 坐标显示工具提示，如：[230, 874]。
?Fix（模式 2） 在任何 HTML 元素上显示工具提示，即使是在另一个工具提示中。... onmouseover="Tip('Some text', FIX, ['PurpleSpan', 0, 5])" ... HTML element to show the tooltip on
?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  工具提示的宽度。值：任意数值。


给弹出的tooltip添加拖拽事件
function addDragEvent()
{
//tooltip的标题
var WzTiTlI=document.getElementById('WzTiTlI');
//tooltip的DIV
var WzTtDiV=document.getElementById('WzTtDiV');
WzTiTlI.onmousedown=function(){
  var s = WzTtDiV.style; 
  var b = document.body;  
  var x = event.clientX + b.scrollLeft - s.pixelLeft;  
  var y = event.clientY + b.scrollTop - s.pixelTop;
  var m = function(){ 
   if(event.button == 1){ 
    s.pixelLeft = event.clientX + b.scrollLeft - x;  
    s.pixelTop = event.clientY + b.scrollTop - y;  
   }else {
    document.detachEvent("onmousemove", m);
   } 
  } 
  document.attachEvent("onmousemove", m) 
  if(!this.z)
   this.z = 999;  
  s.zIndex = ++this.z;  
  event.cancelBubble = true; 
  };
}