📌  相关文章
📜  jQuery UI 工具提示 option() 方法(1)

📅  最后修改于: 2023-12-03 15:16:45.763000             🧑  作者: Mango

jQuery UI 工具提示 option() 方法

概述

jQuery UI 是一个基于 jQuery 的用户界面库，提供了丰富的交互组件和UI效果，其中工具提示（tooltip）组件是一种在用户鼠标悬停在某个元素上时显示一段文本的功能。而 option() 方法则是用来设置或获取工具提示组件的选项。

语法
$( ".selector" ).tooltip( "option", propertyName )

或

$( ".selector" ).tooltip( "option", propertyName, value )

其中，

  • selector：要操作的工具提示元素的选择器或 jQuery 对象；
  • propertyName：要获取或设置的选项名，可以是任意一个工具提示提供的选项；
  • value：设置此选项的值，可以为任意类型。
示例

以下是如何使用 option() 方法来设置和获取工具提示组件的不同选项。

1. 获取选项值
// 获取 myTooltip 元素的 tooltipText 选项
var tooltipText = $( "#myTooltip" ).tooltip( "option", "tooltipText" );
console.log( tooltipText ); // 输出类似 "This is a tooltip." 的文本
2. 设置选项值
// 设置 myTooltip 元素的 position 选项为右侧
$( "#myTooltip" ).tooltip( "option", "position", { my: "left+15 center", at: "right center" } );
可用选项

工具提示组件提供了多种可用的选项，以下是一些常用的选项及其含义：

| 选项名 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | content | String/Function | "" | 工具提示显示的文本内容，可以解析 HTML 标签 | | disabled | Boolean | false | 是否禁用工具提示 | | hide | Boolean/Number/Object | true | 工具提示隐藏的动画效果，可以是 Boolean、Number 或 Object 类型 | | items | String | "[title],[data-tooltip],[data-title],[aria-describedby]" | 工具提示触发的元素选择器 | | position | Object/String | "{ my: "left top+15", at: "left bottom", collision: "fit" }" | 工具提示显示的位置和偏移量 | | show | Boolean/Number/Object | true | 工具提示显示的动画效果，可以是 Boolean、Number 或 Object 类型 | | tooltipClass | String | "" | 工具提示容器元素的 CSS 类名 | | tooltipText | String/Function | "" | 工具提示显示的文本内容，与 content 选项效果相同 |

参考文献