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

Wijmo Tooltip 可以给你的网站添加动感十足的提示信息，给您的最终用户完美的工具提示！在上一篇文章中我们，给大家介绍了 Wijmo -列表插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 Wijmo Tooltip 的特性及使用方法。Wijmo Tooltip即为 jQuery 中的工具提示插件。

如果你是第一次看本系列文章，那么还可以参考本系列的其他几篇文章，相信会给你带来更多惊喜：

看看 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>

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

Options

ajaxCallback

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

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

Type: Boolean

Default: false

Code Example:

$(".selector").wijtooltip("option","mouseTrailing",false)

position

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:

$(".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

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

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

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

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。

转载于:https://www.cnblogs.com/C1SupportTeam/archive/2012/11/16/2773493.html

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

建立你的第一个 Wijmo jQuery Menu:

特性

可定制外观

可定制触发器

模式选择

可定制显示位置

Ajax 异步内容请求

CSS支持

最后，和大家分享一些 Wijmo 资源：

wijlist API 介绍：(点击隐藏 API)

Options

ajaxCallback

animation

calloutAnimation

calloutFilled

closeBehavior

content

group

hideAnimation

hideDelay

mouseTrailing

position

showAnimation

showCallout

showDelay

title

triggers

Events

hidden.tooltip

hiding.tooltip

showing.toolTip

shown.tooltip

Methods

destroy

hide

show