工具提示ui/toolTip

工具提示类似 HTML 的 title 效果，可以在指针移上之后显示一些提示信息。

基本用法
样式
API: ToolTip 类

基本用法

❐import { VNode, render } from "ui/control";
import ToolTip from "ui/toolTip";

render(
    __root__,
    <div>
        <button>按钮</button>
        <ToolTip>工具提示</ToolTip>
    </div>
);

更多选项见弹层控件。

样式

❐<div class="x-tooltip" style="display: inline-block; position: relative;">我是提示文案</div>
<div class="x-tooltip" style="display: inline-block; position: relative;"><span class="x-arrow x-arrow-top"></span>我是提示文案</div>
<div class="x-tooltip" style="display: inline-block; position: relative;"><span class="x-arrow x-arrow-bottom"></span>我是提示文案</div>
<div class="x-tooltip" style="display: inline-block; position: relative;"><span class="x-arrow x-arrow-left"></span>我是提示文案</div>
<div class="x-tooltip" style="display: inline-block; position: relative;"><span class="x-arrow x-arrow-right"></span>我是提示文案</div>

API

ToolTip 类

继承自：Popup

表示一个工具提示。

字段	类型	描述	继承自
⮞ `event` : `"click" \| "dblclick" \| "auxclick" \| "contextmenu" \| "pointerdown" \| "pointerup" \| "pointerenter" \| "pointermove" \| "hover" \| "active" \| "focus" \| "focusin"` = `"hover"` (已覆盖)触发弹层显示的事件。说明 `click`(默认): 点击 `target` 后弹出，点击屏幕空白处消失。 `dblclick`: 双击 `target` 后弹出，点击屏幕空白处消失。 `auxclick`: 右击 `target` 后弹出，点击屏幕空白处消失。 `pointerdown`: 指针在 `target` 按下后弹出，点击屏幕空白处消失。 `pointerup`: 指针在 `target` 按出后弹出，点击屏幕空白处消失。 `contextmenu`：作为 `target` 右键菜单后弹出，点击屏幕空白处消失。 `pointerenter`: 指针移入 `target` 后自动弹出，移到屏幕空白处消失。 `hover`: 指针移入 `target` 后自动弹出，移出 `target` 后消失。 `pointermove`: 指针移入 `target` 后自动弹出，并跟随鼠标移动。 `active`：指针在 `target` 按下时显示，松开后消失。 `focus`： `target` 获取焦点后显示，失去焦点后后消失。 `focusin`：`target` 获取焦点后显示，点击屏幕空白处消失。其它：不绑定事件。继承自 `Popup`	`string`	(已覆盖)触发弹层显示的事件。	`Popup`
⮞ `align` : `PinAlign` = `"top"` (已覆盖)弹层对齐的位置。如果为 null 则不自动对齐。继承自 `Popup`	`PinAlign`	(已覆盖)弹层对齐的位置。如果为 null 则不自动对齐。	`Popup`
⮞ `animation` : `ToggleAnimation` = `"zoomOut"` (已覆盖)显示弹层时使用的动画。继承自 `Popup`	`ToggleAnimation`	(已覆盖)显示弹层时使用的动画。	`Popup`
⮞ `target` : `HTMLElement` 触发弹层显示的元素。继承自 `Popup`	`HTMLElement`	触发弹层显示的元素。	`Popup`
⮞ `delay` : `number` = `100` 显示弹层的延时毫秒数。仅对指针移动事件有效。继承自 `Popup`	`number`	显示弹层的延时毫秒数。仅对指针移动事件有效。	`Popup`
⮞ `pinTarget` : `Rect \| HTMLElement \| Document` = `target` 弹层对齐的目标节点或区域。继承自 `Popup`	`Rect \| HTMLElement \| Document`	弹层对齐的目标节点或区域。	`Popup`
⮞ `margin` : `number` = `0` 元素的外边距，即对齐时元素和 pinTarget 的距离。继承自 `Popup`	`number`	元素的外边距，即对齐时元素和 pinTarget 的距离。	`Popup`
⮞ `container` : `HTMLElement \| Document` = `document` 容器节点或区域，定位超出容器后会自动调整。继承自 `Popup`	`HTMLElement \| Document`	容器节点或区域，定位超出容器后会自动调整。	`Popup`
⮞ `containerPadding` : `number` = `0` 容器的内边距。继承自 `Popup`	`number`	容器的内边距。	`Popup`
⮞ `offset` : `number` = `0` 定位后的额外偏移距离。如果小于 1，则表示相对元素大小的百分比。继承自 `Popup`	`number`	定位后的额外偏移距离。如果小于 1，则表示相对元素大小的百分比。	`Popup`
⮞ `resize` : `boolean` = `false` 如果容器比元素小，是否允许更改元素大小。继承自 `Popup`	`boolean`	如果容器比元素小，是否允许更改元素大小。	`Popup`
⮞ `hideAnimation` : `ToggleAnimation` = `animation` 隐藏弹层时使用的动画。继承自 `Popup`	`ToggleAnimation`	隐藏弹层时使用的动画。	`Popup`
⮞ `hideDuration` : `number` = `duration` 隐藏动画的持续毫秒数。继承自 `Popup`	`number`	隐藏动画的持续毫秒数。	`Popup`
⮞ `timingFunction` : `string` = `"ease-in"` 显示弹层时使用的动画渐变函数。继承自 `Popup`	`string`	显示弹层时使用的动画渐变函数。	`Popup`
⮞ `hideTimingFunction` : `string` = `timingFunction` 隐藏弹层时使用的动画渐变函数。继承自 `Popup`	`string`	隐藏弹层时使用的动画渐变函数。	`Popup`
⮞ `autoHide` : `boolean` = `true` 是否在点击屏幕空白处后消失。继承自 `Popup`	`boolean`	是否在点击屏幕空白处后消失。	`Popup`
⮞ `autoScroll` : `boolean` = `true` 是否在滚动后自动重定位。继承自 `Popup`	`boolean`	是否在滚动后自动重定位。	`Popup`
⮞ `onShow` : `(sender: ToolTip) => void` 弹层显示事件。继承自 `Popup`	`function`	弹层显示事件。	`Popup`
⮞ `onHide` : `(sender: ToolTip) => void` 弹层隐藏事件。继承自 `Popup`	`function`	弹层隐藏事件。	`Popup`
⮞ `onAlign` : `(r: PinResult, sender: ToolTip) => void` 弹层对齐事件。继承自 `Popup`	`function`	弹层对齐事件。	`Popup`
⮞ `disabled` : `boolean` 是否禁用弹窗效果。继承自 `Popup`	`boolean`	是否禁用弹窗效果。	`Popup`
⮞ `arrow` : `boolean` 是否显示箭头。继承自 `Popup`	`boolean`	是否显示箭头。	`Popup`
⮞ `arrowOffset` : `number` 箭头指向位置偏移。如果小于 1 则表示相对于定位目标元素的偏移。继承自 `Popup`	`number`	箭头指向位置偏移。如果小于 1 则表示相对于定位目标元素的偏移。	`Popup`
⮞ `hidden` : `boolean` (只读)是否隐藏。继承自 `Control`	`boolean`	(只读)是否隐藏。	`Control`
⮞ `readyState` : `ControlState` 获取当前控件的渲染状态。继承自 `Control`	`ControlState`	获取当前控件的渲染状态。	`Control`
⮞ `elem` : `HTMLElement` 关联的元素。继承自 `Control`	`HTMLElement`	关联的元素。	`Control`
⮞ `vNode` : `VNode` (保护的)获取当前控件关联的虚拟节点。继承自 `Control`	`VNode`	(保护的)获取当前控件关联的虚拟节点。	`Control`
⮞ `sourceVNode` : `VNode` 获取创建该控件使用的源虚拟节点。继承自 `Control`	`VNode`	获取创建该控件使用的源虚拟节点。	`Control`
⮞ `alwaysUpdate` : `boolean` 控件是否使用主动更新模式。继承自 `Control`	`boolean`	控件是否使用主动更新模式。	`Control`
⮞ `body` : `HTMLElement` (只读)获取用于包含子控件和节点的根元素。继承自 `Control`	`HTMLElement`	(只读)获取用于包含子控件和节点的根元素。	`Control`
⮞ `duration` : `number` = `200` 渐变的持续毫秒数。如果为 0 则不使用渐变。继承自 `Control`	`number`	渐变的持续毫秒数。如果为 0 则不使用渐变。	`Control`
⮞ `class` : `string` CSS 类名。继承自 `Control`	`string`	CSS 类名。	`Control`
⮞ `style` : `string \| { [key: string]: string \| number; }` 控件样式。继承自 `Control`	`string \| object`	控件样式。	`Control`
⮞ `id` : `string` 控件序号。继承自 `Control`	`string`	控件序号。	`Control`
⮞ `content` : `NodeLike` 控件内容。继承自 `Control`	`NodeLike`	控件内容。	`Control`
⮞ `onSelectStart` : `(e: Event, sender: ToolTip) => void` 选择开始事件。参考 https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onselectstart 继承自 `Control`	`function`	选择开始事件。	`Control`
⮞ `onClick` : `(e: MouseEvent, sender: ToolTip) => void` 点击事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onclick 继承自 `Control`	`function`	点击事件。	`Control`
⮞ `onAuxClick` : `(e: MouseEvent, sender: ToolTip) => void` 中键点击事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onauxclick 继承自 `Control`	`function`	中键点击事件。	`Control`
⮞ `onDblClick` : `(e: MouseEvent, sender: ToolTip) => void` 双击事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ondblclick 继承自 `Control`	`function`	双击事件。	`Control`
⮞ `onContextMenu` : `(e: PointerEvent, sender: ToolTip) => void` 右键菜单事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/oncontextmenu 继承自 `Control`	`function`	右键菜单事件。	`Control`
⮞ `onMouseDown` : `(e: MouseEvent, sender: ToolTip) => void` 鼠标按下事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmousedown 继承自 `Control`	`function`	鼠标按下事件。	`Control`
⮞ `onMouseUp` : `(e: MouseEvent, sender: ToolTip) => void` 鼠标按上事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseup 继承自 `Control`	`function`	鼠标按上事件。	`Control`
⮞ `onMouseOver` : `(e: MouseEvent, sender: ToolTip) => void` 鼠标移入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseover 继承自 `Control`	`function`	鼠标移入事件。	`Control`
⮞ `onMouseOut` : `(e: MouseEvent, sender: ToolTip) => void` 鼠标移开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseout 继承自 `Control`	`function`	鼠标移开事件。	`Control`
⮞ `onMouseEnter` : `(e: MouseEvent, sender: ToolTip) => void` 鼠标进入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseenter 继承自 `Control`	`function`	鼠标进入事件。	`Control`
⮞ `onMouseLeave` : `(e: MouseEvent, sender: ToolTip) => void` 鼠标离开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmouseleave 继承自 `Control`	`function`	鼠标离开事件。	`Control`
⮞ `onMouseMove` : `(e: MouseEvent, sender: ToolTip) => void` 鼠标移动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onmousemove 继承自 `Control`	`function`	鼠标移动事件。	`Control`
⮞ `onWheel` : `(e: WheelEvent, sender: ToolTip) => void` 鼠标滚轮事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/Events/wheel 继承自 `Control`	`function`	鼠标滚轮事件。	`Control`
⮞ `onScroll` : `(e: UIEvent, sender: ToolTip) => void` 滚动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll 继承自 `Control`	`function`	滚动事件。	`Control`
⮞ `onTouchStart` : `(e: TouchEvent, sender: ToolTip) => void` 触摸开始事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchstart 继承自 `Control`	`function`	触摸开始事件。	`Control`
⮞ `onTouchMove` : `(e: TouchEvent, sender: ToolTip) => void` 触摸移动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchmove 继承自 `Control`	`function`	触摸移动事件。	`Control`
⮞ `onTouchEnd` : `(e: TouchEvent, sender: ToolTip) => void` 触摸结束事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchend 继承自 `Control`	`function`	触摸结束事件。	`Control`
⮞ `onTouchCancel` : `(e: TouchEvent, sender: ToolTip) => void` 触摸撤销事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchcancel 继承自 `Control`	`function`	触摸撤销事件。	`Control`
⮞ `onPointerEnter` : `(e: PointerEvent, sender: ToolTip) => void` 指针进入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerenter 继承自 `Control`	`function`	指针进入事件。	`Control`
⮞ `onPointerLeave` : `(e: PointerEvent, sender: ToolTip) => void` 指针离开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerleave 继承自 `Control`	`function`	指针离开事件。	`Control`
⮞ `onPointerOver` : `(e: PointerEvent, sender: ToolTip) => void` 指针移入事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerover 继承自 `Control`	`function`	指针移入事件。	`Control`
⮞ `onPointerOut` : `(e: PointerEvent, sender: ToolTip) => void` 指针移开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerout 继承自 `Control`	`function`	指针移开事件。	`Control`
⮞ `onPointerDown` : `(e: PointerEvent, sender: ToolTip) => void` 指针按下事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerdown 继承自 `Control`	`function`	指针按下事件。	`Control`
⮞ `onPointerMove` : `(e: PointerEvent, sender: ToolTip) => void` 指针移动事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointermove 继承自 `Control`	`function`	指针移动事件。	`Control`
⮞ `onPointerUp` : `(e: PointerEvent, sender: ToolTip) => void` 指针松开事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointerup 继承自 `Control`	`function`	指针松开事件。	`Control`
⮞ `onPointerCancel` : `(e: PointerEvent, sender: ToolTip) => void` 指针取消事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onpointercancel 继承自 `Control`	`function`	指针取消事件。	`Control`
⮞ `onGotPointerCapture` : `(e: PointerEvent, sender: ToolTip) => void` 指针开始捕获事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ongotpointercapture 继承自 `Control`	`function`	指针开始捕获事件。	`Control`
⮞ `onLostPointerCapture` : `(e: PointerEvent, sender: ToolTip) => void` 指针停止捕获事件。参考 https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onlostpointercapture 继承自 `Control`	`function`	指针停止捕获事件。	`Control`

方法描述继承自

⮞ render()():VNode

(保护的)

返回值

类型：VNode

继承自

Popup

(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。

Popup

⮞ layout()():void

返回值

类型：void

继承自

Control

重新布局当前控件。

Control

⮞ show()():void

显示当前弹层。

返回值

类型：void

继承自

Popup

显示当前弹层。

Popup

⮞ hide()():void

隐藏当前弹层。

返回值

类型：void

继承自

Popup

隐藏当前弹层。

Popup

⮞ toggle(...)(value?:boolean):void

切换显示或隐藏当前弹层。

参数	类型	描述	默认值
`value`	`boolean`		—

返回值

类型：void

继承自

Popup

切换显示或隐藏当前弹层。

Popup

⮞ realign()():PinResult

重新对齐弹层的位置。

返回值

类型：PinResult

继承自

Popup

重新对齐弹层的位置。

Popup

⮞ handleDocumentPointerDown(e)(e:MouseEvent):void

(保护的)处理文档指针按下事件。

参数	类型	描述	默认值
`e*`	`MouseEvent`		—

返回值

类型：void

继承自

Popup

(保护的)处理文档指针按下事件。

Popup

⮞ handleDocumentScroll(e)(e:MouseEvent):void

(保护的)处理文档滚动事件。

参数	类型	描述	默认值
`e*`	`MouseEvent`		—

返回值

类型：void

继承自

Popup

(保护的)处理文档滚动事件。

Popup

⮞ init()():void

(保护的)当被子类重写时负责在关联元素后初始化当前控件。

返回值

类型：void

继承自

Control

(保护的)当被子类重写时负责在关联元素后初始化当前控件。

Control

⮞ uninit()():void

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

返回值

类型：void

继承自

Control

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

Control

⮞ update()():void

重新渲染当前控件。

返回值

类型：void

继承自

Control

重新渲染当前控件。

Control

⮞ invalidate()():void

使当前控件无效并在下一帧重新渲染。

返回值

类型：void

继承自

Control

使当前控件无效并在下一帧重新渲染。

Control

⮞ renderTo(parent, ...)(parent:Control | Node, refChild?:Control | Node):void

将当前控件渲染到指定的父控件或节点。

参数	类型	描述	默认值
`parent*`	`Control \| Node`		—
`refChild`	`Control \| Node`		—

返回值

类型：void

继承自

Control

将当前控件渲染到指定的父控件或节点。

Control

⮞ find(selector)(selector:string):Control | HTMLElement

在当前控件查找指定的子控件或节点。

参数	类型	描述	默认值
`selector*`	`string`		—

返回值

类型：Control | HTMLElement

返回子控件或节点。如果找不到则返回 null。

继承自

Control

在当前控件查找指定的子控件或节点。

Control

⮞ query(selector)(selector:string):(Control | HTMLElement)[]

在当前控件查找匹配的所有子控件或节点。

参数	类型	描述	默认值
`selector*`	`string`		—

返回值

类型：(Control | HTMLElement)[]

返回子控件或节点列表。

继承自

Control

在当前控件查找匹配的所有子控件或节点。

Control

☍工具提示ui/toolTip

☍基本用法

☍样式

☍API

☍⅏ToolTip 类

说明

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

继承自

参考

工具提示ui/toolTip

基本用法

样式

API

ToolTip 类