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

// $(document).ready(function () {
$("#h52").bind("click",function () {
$("#content2").toggle(500);
$("#h52").toggleClass("hide show");
});
$("#h53").bind("click",function () {
$("#content3").toggle(500);
$("#h53").toggleClass("show hide");
});
$("#h54").bind("click",function () {
$("#content4").toggle(500);
$("#h54").toggleClass("show hide");
});
});
// ]]>
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。