jQWidgets jqxToolTip 完整参考

简介

jqxToolTip 是 jQWidgets 的一部分，是一个用于显示提示信息的插件。该插件使用 HTML、CSS 和 JavaScript 技术来设计和编写。它可以用于任何 HTML 元素或者 DOM 对象如表单元素、图像、链接、表格等。

特性

• 强大的 API，提供了丰富的选项和方法；
• 支持 HTML 内容和自定义设计；
• 支持多种动画效果；
• 支持事件监听和回调；
• 支持多种触发方式，如鼠标悬停、元素点击等。

安装

jqxToolTip 在 jQWidgets 中已经预装。如果你已经使用 jQWidgets，可以直接调用 jqxToolTip。如果没有使用 jQWidgets，请先安装 jQWidgets。

安装 jQWidgets：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.1.0/jqwidgets/styles/jqx.base.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.1.0/jqwidgets/jqxcore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.1.0/jqwidgets/jqxbuttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.1.0/jqwidgets/jqxtooltip.js"></script>

快速开始

创建一个名为 "tooltipContainer" 的 div 元素，然后可以像下面这样使用 jqxTooltip：

<div id="tooltipContainer">This is some text that need a tooltip.</div>

$("#tooltipContainer").jqxTooltip({ content: 'This is a tooltip.' });

现在，当鼠标悬停在 "tooltipContainer" 上时，就会弹出 "This is a tooltip." 的提示框。

API 参考

Options

下面列出了 jqxTooltip 支持的选项列表：

| Name | Type | Default Value | Description | |-----------------------------|----------------------|-----------------|-----------------------------------------------------------------------------------------------| | animationDuration | int | 250 | 在动画中使用的时间（以毫秒为单位）。 | | autoHide | bool | true | 隐藏 tooltip，当鼠标没有进入此tooltip或者 tooltip失去焦点触发事件的时候。 | | autoHideDelay | int | 3000 | 执行自动隐藏前的等待时间（以毫秒为单位）。 | | content | String/HTMLElements | '' | tooltip 显示的内容。 | | disabled | bool | false | 禁用 tooltip。 | | name | String | 'tooltip' | tooltip 的名称。 | | opacity | float | 1.0 | tooltip 的不透明度。 | | position | String | 'top' | tooltip 的位置参考. | | rtl | bool | false | tooltip 的布局从右到左（从右到左）（RTL）显示。 | | showArrow | bool | true | 在 tooltip 上显示箭头。 | | trigger | String | 'hover' | tooltip 的触发事件。 | | value | Number | 0 | 一个数字。 (用于 Slider 和 RangeSlider 控件中). | | autoUpdate | bool | false | 当 content option 是一个jQuery对象并且状态改变时候可以自动更新tooltip. | | positionOffset | {left: number, top: number} | {left: 0, top: 0} | tooltip 的位置偏移量分别对于 X 和 Y 轴。 (上，下，左和右). | | triggerCloseOnClick | bool | true | 关闭tooltip，当用户单击tooltip 的时候。 | | showDelay | int | 150 | 移动到此tooltip后显示tooltip的等待时间（以毫秒为单位）。 | | hideDelay | int | 200 | 隐藏tooltip的等待时间（以毫秒为单位）。 | | positionRelativeTo | String/HTMLElement | window | tooltip 相对于它的位置元素。 | | openMode | String | 'mouse' | tooltip 应该如何显示。'click' 可以被设置来显示tooltip。 | | closeOnClick | bool | false | 单击此tooltip后是否自动关闭。 | | initContent | function | null | 初始化参数。用于创建动态的内容。 | | pointer | bool | false | 通过设置此标志，您可以启用指针样式并手动定义它的位置。 | | positionCallback | function | null | 用于在自动定位选项中自定义定位的回调函数。此函数接收待拟定对象和可用空间。 | | template | String | '' | tooltip的HTML模板。如果指定了模板，该选项会忽略相应的content选项。 | | theme | String | '' | tooltip 的主题。如果留空，则使用 jqx-widccet-bootstrap 作为默认主题。 | | tryDefaultPosition | bool | false | 指定 tooltip 在任何方向上都能正常成功显示。 | | width | int | 'auto' | tooltip 的宽度。 | | height | int | 'auto' | tooltip 的高度。 | | zIndex | int | 9999 | tooltip 的 z-index 值。

Methods

下面列出了 jqxTooltip 支持的方法列表：

| Method Name | Returns | Description | |----------------|--------|------------------------------------------------| | destroy | void | 删除 tooltip。 | | show | void | 显示 tooltip。 | | hide | void | 隐藏 tooltip。 | | updateContent | void | 更新 tooltip。 | | setOptions | void | 设置 tooltip 选项。 | | refresh | void | 刷新 tooltip。 |

Events

下面列出了 jqxTooltip 支持的事件列表：

| Event Name | Arguments | Description | |---------------|--------------------------------------------------------------|--------------------------------------------------------------| | closeButtonclick | event | 通过点击 close 按钮关闭 tooltip 时触发的事件。 | | hidden | event | 隐藏 tooltip 时触发的事件。 | | hidding | event | 在隐藏 tooltip 之前触发的事件。 | | mouseenter | event, x, y | 鼠标进入 tooltip 时触发的事件。 | | mouseleave | event, x, y | 鼠标离开 tooltip 时触发的事件。 | | open | event | 显示 tooltip 时触发的事件。 | | opening | event | 显示 tooltip 之前触发的事件。 |

示例

开始

$("#tooltipContainer").jqxTooltip({
    content: 'Tooltip content'
});

显示特效

$("#tooltipContainer").jqxTooltip({
    content: 'Tooltip content',
    animationDuration: 500
});

鼠标右键触发

$("#rightClickTarget").jqxTooltip({
    content: 'Right click target',
    trigger: 'rightclick'
});

自定义样式

$("#styledContainer").jqxTooltip({
    content: 'Tooltip content',
    showArrow: false,
    theme: 'myTheme',
    width: 150,
    height: 45
});

多个触发器

$("#multipleTriggerContainer").jqxTooltip({
    content: 'This is a tooltip.',
    trigger: 'hover click'
});

结论

jqxTooltip 是 jQWidgets 的一部分，是一个功能强大的提示信息插件，可以用于表单元素、图像、链接、表格等任何 HTML 元素或者 DOM 对象。它提供了丰富的选项和方法、支持 HTML 内容和自定义设计、支持多种动画效果、支持多种触发方式、支持事件监听和回调等功能，可以非常方便地满足前端开发者的 Tooltip 需求。