js tooltip之wz_tooltip使用方法和参数备忘
7、通过变量或函数调用获得工具提示内容
为了代替用单引号结束字符串,Tip() 很好地接受其它地方定义的变量或调用一个函数,比如 <script> 块中或单独的 JS文件。这与通过 Tip() 或 TagToTip()命令是相同的(请见下面列出的命令)。因为,每次将要显示工具提示时,它的内容或格式可以动态建立。
示例:
<html>
<head>
...
<script type="text/javascript">
var txt1 = "This is the text of the first tooltip";
function TooltipTxt(n)
{
??? return "This is the text of the " + n + " tooltip";
}
</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
...
<a href="a.htm" onmouseover="Tip(txt1)" onmouseout="UnTip()">Link 1</a>
...
<a href="b.htm" onmouseover="Tip(TooltipTxt('second'))" onmouseout="UnTip()">Link 2</a>
...
<a href="c.htm" onmouseover="Tip(TooltipTxt('third'))" onmouseout="UnTip()">Link 3</a>
...
</body>
</html>
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('Sometext', FIX, ['PurpleSpan', 0, 5])" ... <span id="PurpleSpan">HTMLelement 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? 工具提示的宽度。值:任意数值。