1# Tooltip Control 2 3You can bind a floating tooltip to a component. The tooltip is automatically displayed when the cursor hovers over the component and hidden when the cursor moves away. 4 5> **NOTE** 6> 7> This API is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version. 8 9## bindTips 10bindTips(message: TipsMessageType, options?: TipsOptions) 11 12Binds a tooltip to the component. 13 14> **NOTE** 15> 16> If the **enable** attribute of the bound component is set to **false**, the tooltip can still be displayed. 17 18**Atomic service API**: This API can be used in atomic services since API version 18. 19 20**System capability**: SystemCapability.ArkUI.ArkUI.Full 21 22**Parameters** 23 24| Name| Type | Mandatory| Description | 25| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 26| message| [TipsMessageType](#tipsmessagetype) | Yes | Content of the tooltip message.| 27| options | [TipsOptions](#tipsoptions) | No | Parameters of the tooltip.<br>Default value:<br>{<br>appearingTime:700,<br>disappearingTime:300,<br>appearingTimeWithContinuousOperation: 300,<br>disappearingTimeWithContinuousOperation:0, enableArrow:true,<br>arrowPointPosition:ArrowPointPosition.CENTER,<br>arrowWidth:16vp,arrowHeight:8vp<br>} | 28 29## TipsOptions 30 31Defines the parameters of the tooltip. 32 33**Atomic service API**: This API can be used in atomic services since API version 18. 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Name | Type | Mandatory| Description | 38| ------------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 39| appearingTime | number | No |Delay before the tooltip appears.<br>Default value: **700**.<br>Unit: ms.| 40| disappearingTime | number | No | Delay before the tooltip disappears.<br>Default value: **300**.<br>Unit: ms.| 41| appearingTimeWithContinuousOperation | number | No | Delay before the tooltip disappears when multiple tooltips are displayed consecutively.<br>Default value: **300**.<br>Unit: ms.| 42| disappearingTimeWithContinuousOperation | number | No | Delay before the tooltip disappears when multiple tooltips are displayed consecutively.<br>Default value: **0**.<br>Unit: ms.| 43| enableArrow | boolean | No | Whether to display the tooltip arrow.<br>Default value: **true**.<br>**NOTE**<br>If the available space on the screen is insufficient, the tooltip will cover part of the component and the arrow will not be displayed.| 44| arrowPointPosition | [ArrowPointPosition](ts-appendix-enums.md#arrowpointposition11) | No | Position of the tooltip arrow relative to its parent component. Available positions are **Start**, **Center**, and **End**, in both vertical and horizontal directions. These positions are within the parent component area and do not exceed its boundaries or cover rounded corners.<br>Default value: **ArrowPointPosition.CENTER**.| 45| arrowWidth | [Dimension](ts-types.md#dimension10) | No | Width of the tooltip arrow. If the arrow width exceeds the length of the edge minus twice the size of the tooltip rounded corner, the arrow is not drawn.<br>Default value: **16**.<br>Unit: vp.<br>**NOTE**<br>Percentage values are not supported.| 46| arrowHeight | [Dimension](ts-types.md#dimension10) | No | Height of the tooltip arrow.<br>Default value: **8**.<br>Unit: vp.<br>**NOTE**<br>Percentage values are not supported.| 47 48## TipsMessageType 49 50type TipsMessageType = ResourceStr | StyledString 51 52Provides information about the tooltip. 53 54**Atomic service API**: This API can be used in atomic services since API version 18. 55 56**System capability**: SystemCapability.ArkUI.ArkUI.Full 57 58| Type | Description | 59| ---------------------------------------------------------- | ---------------------------------------------- | 60| [ResourceStr](ts-types.md#resourcestr) | Type used to represent the types that can be used by input parameters of the string type.| 61| [StyledString](ts-universal-styled-string.md#styledstring) | Styled string. | 62 63## Example 64 65### Example 1: Binding a Tooltip 66 67This example shows how to bind a tooltip to a button using **bindTooltip**. 68 69```ts 70// xxx.ets 71@Entry 72@Component 73struct TipsExample { 74 build() { 75 Flex({ direction: FlexDirection.Column }) { 76 Button('Hover Tips') 77 .bindTips("test Tips", { 78 appearingTime: 700, 79 disappearingTime: 300, 80 appearingTimeWithContinuousOperation: 300, 81 disappearingTimeWithContinuousOperation: 0, 82 enableArrow:true, 83 }) 84 .position({ x: 100, y: 250 }) 85 }.width('100%').padding({ top: 5 }) 86 } 87} 88``` 89 90 91 92### Example 2: Displaying and Hiding Multiple Tooltips 93 94This example demonstrates how to configure multiple tooltips to appear and disappear in sequence using **bindTips**. 95 96```ts 97// xxx.ets 98 99@Entry 100@Component 101struct TipsExample { 102 build() { 103 Flex({ direction: FlexDirection.Column }) { 104 Button('Hover Tips') 105 .bindTips("test Tips", { 106 appearingTime: 700, 107 disappearingTime: 300, 108 appearingTimeWithContinuousOperation: 300, 109 disappearingTimeWithContinuousOperation: 0, 110 enableArrow:true, 111 }) 112 .position({ x: 100, y: 250 }) 113 114 Button('Hover Tips') 115 .bindTips("test Tips", { 116 appearingTime: 700, 117 disappearingTime: 300, 118 appearingTimeWithContinuousOperation: 300, 119 disappearingTimeWithContinuousOperation: 0, 120 enableArrow:true, 121 }) 122 .position({ x: 100, y: 350 }) 123 124 125 }.width('100%').padding({ top: 5 }) 126 } 127} 128``` 129 130 131
