不得不爱开源 Wijmo jQuery 插件集（13）-【Tooltip】(附页面展示和源码)

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。