1# Tips控制 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9为组件绑定Tips悬浮气泡，当鼠标悬浮在组件上时，自动显示提示信息；鼠标离开组件时，悬浮气泡自动隐藏。 10 11> **说明：** 12> 13> 从API version 19开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 目前支持通过外接鼠标、手写笔以及触控板触发。 16 17## bindTips 18bindTips(message: TipsMessageType, options?: TipsOptions): T 19 20为组件绑定Tips悬浮气泡。 21 22> **说明：** 23> 24> 当绑定bindTips的组件设置通用属性enable为false时，仍支持弹出悬浮气泡。 25 26**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 27 28**系统能力：** SystemCapability.ArkUI.ArkUI.Full 29 30**参数：** 31 32| 参数名 | 类型 | 必填 | 说明 | 33| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 34| message| [TipsMessageType](#tipsmessagetype) | 是 | 弹窗信息内容。 | 35| options | [TipsOptions](#tipsoptions类型说明) | 否 | 配置悬浮气泡的参数。<br/>默认值：<br/>{<br/>appearingTime: 700,<br/>disappearingTime: 300,<br/>appearingTimeWithContinuousOperation: 300,<br/>disappearingTimeWithContinuousOperation: 0, enableArrow: true,<br/>arrowPointPosition: ArrowPointPosition.CENTER,<br/>arrowWidth: 16,arrowHeight: 8vp,<br/>showAtAnchor: TipsAnchorType.TARGET<br/>} | 36 37**返回值：** 38 39|类型|说明| 40|---|---| 41|T|返回当前组件。| 42 43## TipsOptions类型说明 44 45悬浮气泡自定义参数。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49| 名称 | 类型 | 只读 | 可选 | 说明 | 50| ------------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 51| appearingTime | number | 否 | 是 |设置悬浮气泡的显示时延。 <br/>默认值：700<br/>单位：ms<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 52| disappearingTime | number | 否 | 是 | 设置悬浮气泡的隐藏时延。 <br/>默认值：300<br/>单位：ms<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 53| appearingTimeWithContinuousOperation | number | 否 | 是 | 多个组件连续弹出悬浮气泡时，悬浮气泡的显示时延。 <br/>默认值：300<br/>单位：ms<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 54| disappearingTimeWithContinuousOperation | number | 否 | 是 | 多个组件连续弹出悬浮气泡时，悬浮气泡的隐藏时延。 <br/>默认值：0<br/>单位：ms<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 55| enableArrow | boolean | 否 | 是 | 设置是否显示气泡箭头。值为true时，显示箭头；值为false时，不显示箭头。<br/>默认值：true<br/>**说明：** <br/>当页面可用空间无法让气泡完全避让时，气泡会覆盖到组件上并且不显示气泡箭头。<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 56| arrowPointPosition | [ArrowPointPosition](ts-appendix-enums.md#arrowpointposition11) | 否 | 是 | 气泡箭头相对于父组件显示位置，气泡箭头在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。所有位置点均位于父组件区域范围内，不会超出父组件的边界范围，也不会覆盖圆角范围。<br/>默认值：ArrowPointPosition.CENTER<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 57| arrowWidth | [Dimension](ts-types.md#dimension10) | 否 | 是 | 设置气泡箭头宽度。若所设置的宽度超过所在边的长度减去两倍的气泡圆角大小，则不绘制气泡箭头。<br/>默认值：16<br/>单位：vp<br/>**说明：**<br />不支持设置百分比。<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 58| arrowHeight | [Dimension](ts-types.md#dimension10) | 否 | 是 | 设置气泡箭头高度。<br/>默认值：8<br/>单位：vp<br/>**说明：**<br />不支持设置百分比。<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 59| showAtAnchor<sup>20+</sup> | [TipsAnchorType](ts-appendix-enums.md#tipsanchortype20) | 否 | 是 | 设置Tips跟随类型。<br/>默认值：TipsAnchorType.TARGET<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 60 61## TipsMessageType 62 63type TipsMessageType = ResourceStr | StyledString 64 65悬浮气泡弹窗信息。 66 67**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71| 类型 | 说明 | 72| ---------------------------------------------------------- | ---------------------------------------------- | 73| [ResourceStr](ts-types.md#resourcestr) | 字符串类型，用于描述字符串入参可以使用的类型。 | 74| [StyledString](ts-universal-styled-string.md#styledstring) | 属性字符串。 | 75 76## 示例 77示例效果请以真机运行为准，当前DevEco Studio预览器不支持。 78### 示例1（悬浮气泡的显示和消失） 79 80此示例为bindTips通过绑定Button产生悬浮气泡。 81 82```ts 83// xxx.ets 84@Entry 85@Component 86struct TipsExample { 87 build() { 88 Flex({ direction: FlexDirection.Column }) { 89 Button('Hover Tips') 90 .bindTips("Tips", { 91 appearingTime: 700, 92 disappearingTime: 300, 93 appearingTimeWithContinuousOperation: 300, 94 disappearingTimeWithContinuousOperation: 0, 95 enableArrow: true, 96 }) 97 .position({ x: 100, y: 250 }) 98 }.width('100%').padding({ top: 5 }) 99 } 100} 101``` 102 103 104### 示例2（多个悬浮气泡的显示和消失） 105 106此示例展示了如何使用bindTips配置多个悬浮气泡依次显示和消失。 107 108```ts 109// xxx.ets 110 111@Entry 112@Component 113struct TipsExample { 114 build() { 115 Flex({ direction: FlexDirection.Column }) { 116 Button('Hover Tips') 117 .bindTips("Tips", { 118 appearingTime: 700, 119 disappearingTime: 300, 120 appearingTimeWithContinuousOperation: 300, 121 disappearingTimeWithContinuousOperation: 0, 122 enableArrow: true, 123 }) 124 .position({ x: 100, y: 250 }) 125 126 Button('Hover Tips') 127 .bindTips("Tips", { 128 appearingTime: 700, 129 disappearingTime: 300, 130 appearingTimeWithContinuousOperation: 300, 131 disappearingTimeWithContinuousOperation: 0, 132 enableArrow: true, 133 }) 134 .position({ x: 100, y: 350 }) 135 136 137 }.width('100%').padding({ top: 5 }) 138 } 139} 140``` 141 142 143
