Wijmo Tooltip 可以给你的网站添加动感十足的提示信息，给您的最终用户完美的工具提示！在上一篇文章中我们，给大家介绍了 Wijmo -列表插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Wijmo Tooltip 的特性及使用方法。Wijmo Tooltip即为 jQuery 中的工具提示插件。
如果你是第一次看本系列文章，那么还可以参考本系列的其他几篇文章，相信会给你带来更多惊喜：
- 不得不爱开源 Wijmo jQuery 插件集（1）-【开篇】(附演示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（2）-【准备工作】(附30种Theme演示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（3）-【Menu】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（5）-【对话框】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（6）-【Popup】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（7）-【进度条】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（8）-【滑动条】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（9）-【日历】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（10）-【Expander】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（11）-【Spilter】(附页面展示和源码)
- 不得不爱开源 Wijmo jQuery 插件集（12）-【List】(附页面展示和源码)
看看 wijtootip 给我们带来了哪些惊喜？(鼠标 hover 图片查看效果)
建立你的第一个 Wijmo jQuery Menu:
HTML 标签：
<input title="tooltip1" type="text" />
<div id="targetContainer">
<div>
<input title="I am a unique and special tooltip!" type="text" />
</div>
</div>
jQuery 脚本：
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("[title]").wijtooltip();
});
</script>
特性
可定制外观
wijtooltip 通过 <div> 标签来实现，所以我们可以任意定制 div 的 字体、边框和背景等 CSS 演示。
可定制触发器
可以定制显示 tooltip 的事件：hover，Click，right-click，focus 等等随心选择。
模式选择
通过设置 modal 为 true，来创建 独占模式 的 tooltip，直到 tooltip 消失，才可以操作其他元素。
可定制显示位置
使用 position 选项来控制 tooltip 的显示位置。
Ajax 异步内容请求
通过 OnAjaxUpdate 事件异步从后台获取 tooltip 内容。
CSS支持
你可以使用这一种级联样式表（CSS）的样式来定义自定义皮肤。有了CSS支持，你可以使该扩展器与你的组织标准相匹配。
最后，和大家分享一些 Wijmo 资源：
1.源码下载（包含以上特性）:Wijmo-Tooltip.zip
2.更多信息请参考：Wijmo 中文网站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm
3.开源Wijmo jQuery 讨论社区： http://gcdn.grapecity.com/index.aspx
wijlist API 介绍：(点击隐藏 API)
Options
ajaxCallback
- 该值用来定义通过AJAX模式来获取内容的回调。
- Remarks:
- 在 AJAX 的 complete 回调方法中，用户可以使用 callback data 设置 tooltip 内容。
- Type: Function
- Default: false
- Code Example:
-
$(".selector").wijtooltip("option","ajaxCallback",function(){})
animation
- 该值用来定义要显示或隐藏工具提示的动画。
- Type: Object
- Default: {animated: "fade", duration: 500, easing: null}
- Code Example:
-
$(".selector").wijtooltip("option","animation", {animated:"fade", duration: 400, easing:null})
calloutAnimation
- 该值用来定义要移动工具提示位置的动画。
- Remarks:
- object 类型，如: {duration:100,easing:'swing'}.
- Type: Object
- Default: {}
- Code Example:
-
$(".selector").wijtooltip("option","calloutAnimation",{duration:200})
calloutFilled
- 该值用来确定标注的类样式。
- Type: Boolean
- Default: true
- Code Example:
-
$(".selector").wijtooltip("option","calloutFilled",true)
closeBehavior
- 该值用来确定应该如何关闭工具提示。
- Type: String
- Default: auto
- Code Example:
-
$(".selector").wijtooltip("option","closeBehavior","auto")
content
- 该值用来获取和设置工具提示的内容。
- Remarks:
- 可以为 方法或 HTML 标记，如果为方法，tooltip 内容为 方法 的返回值。
- Type: String or Function
- Default:
- Code Example:
-
$(".selector").wijtooltip("option","content","my content")
group
- 如果该分组选项与另一个工具提示部件设置相同，则这两个部件共用一个工具提示DOM。
- Type: String
- Default: null
- Code Example:
-
$(".selector").wijtooltip("option","group","A")
hideAnimation
- 该值用来定义要隐藏工具提示的动画。
- Remarks: object 类型，如 showAnimation 属性。
- Type: Object
- Default: {}
- Code Example:
-
$(".selector").wijtooltip("option","hideAnimation",{animated:'fade',duration:500})
hideDelay
- 该值用来确定在工具提示消失之前延迟的长度。
- Type: Number
- Default: 0
- Code Example:
-
$(".selector").wijtooltip("option","hideDelay",200)
mouseTrailing
- 如果该值设置为true的话，则工具提示会与鼠标一起移动。
- Type: Boolean
- Default: false
- Code Example:
-
$(".selector").wijtooltip("option","mouseTrailing",false)
position
- 该值用来设置工具提示与'relativeTo“，”offsetX'，和'offsetY'属性相关的位置模式。
- Type: Object
- Default: auto
- Code Example:
-
$(".selector").wijtooltip("option","position",{my:'left bottom',at:'right top',offset:'0 0'})
showAnimation
- 该值用来定义要显示工具提示的动画。
- Remarks:
- object 类型。预设值有： 'animated', 'duration',，和 'easing'.。
- Type: Object
- Default: {}
- Code Example:
-
$(".selector").wijtooltip("option","showAnimation",{animated:fade,duration:500})
showCallout
- 该值用来确定是否要显示标注元素。
- Type: Boolean
- Default: true
- Code Example:
-
$(".selector").wijtooltip("option","showCallout",true)
showDelay
- 该值用来确定工具提示出现之前的延迟的时间。
- Type: Number
- Default: 0
- Code Example:
-
1
$(".selector").wijtooltip("option","showDelay",200)
title
- 该值用来指定一个值，该值可以设置工具提示的标题。
- Type: String
- Default: ””
- Remarks:
- 可以为 方法或 HTML 标记，如果为方法，tooltip 内容为 方法 的返回值。
Code example:
-
$(".selector").wijtooltip("option","title","my title");
triggers
- 该值用来获取和设置将导致工具提示显示事件。
- Remarks:
- 预设值有：'hover'，'click'，'focus'， 'rightclick'， 或者'custom'.
- Type: String
- Default: 'hover'
- Code Example:
-
$(".selector").wijtooltip("option","triggers","hover")
Events
hidden.tooltip
- 当C1ToolTip被隐藏时，在客户端触发。
- Parameters:
- e: This is the jquery event object.
- ui: This is the wijtooltip widget object.
- Code Example:
-
// Supply a function as an option.$(".selector").wijtooltip({hidden:function(e, ui){}});//Bind to the event by type: wijtooltiphidden$(".selector").bind("wijtooltiphidden",function(e, ui){});
hiding.tooltip
- 在C1ToolTip被隐藏之前，在客户端触发。
- Parameters:
- e: This is the jquery event object.
- ui: This is the wijtooltip widget object.
- Code Example:
// Supply a function as an option.-
$(".selector").wijtooltip({hiding:function(e, ui){}});// Bind to the event by type: wijtooltiphiding$(".selector").bind("wijtooltiphiding",function(e, ui){});
showing.toolTip
- 在C1ToolTip显示之前，在客户端触发。
- Remarks:
- If data.cancel is set to true, then the tooltip is no longer shown.
- Parameters:
- e: This is the jquery event object.
- ui: This is the tooltip widget.
- Code Example:
-
// Supply a function as an option.$("#selector").wijtooltip({showing:function(e,ui){}});// Bind to the event by type: wijtooltipshowing$(".selector").bind("wijtooltipshowing",function(e, ui){});
shown.tooltip
- 当C1ToolTip显示时，在客户端触发。
- Parameters:
- e: This is the jquery event object.
- ui: This is the wijtooltip widget object.
- Code Example:
-
// Supply a function as an option.$(".selector").wijtooltip({shown:function(e, ui){}});// Bind to the event by type: wijtooltipshown$(".selector").bind("wijtooltipshown",function(e, ui){});
Methods
destroy
重置 wijtooltip 到初始化状态。
hide
- 隐藏 wijtooltip.
show
- 显示 wijtooltip。