Skip to main content
Supported Regions:上海

Tooltip

WdBubble

Applicable Scenarios​

Used to display tooltips.

Example​

Display of Different Trigger Behaviors​

Display of Different Pop-up Directions​

Different Styles of Tooltips​

Tooltip Delay Opening and Closing​

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
打开时延(毫秒)openDelaynumber

气泡提示的打开时延(毫秒)

0
关闭时延(毫秒)closeDelaynumber

气泡提示的关闭时延(毫秒)

Default value: 200

箭头是否指向中心arrowPointAtCenterboolean

气泡提示的箭头是否指向中心

触发行为triggerstring

触发气泡提示的行为

Default value: "hover"

弹出方向placementstring

气泡提示的弹出方向

Default value: "top"

气泡风格promptThemestring

气泡提示的风格

Default value: "default"

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
打开气泡openWeb

-

关闭气泡closeWeb

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
触发行为triggerstring

触发气泡提示的行为

弹出方向placementstring

气泡提示的弹出方向

气泡风格promptThemestring

气泡提示的风格

Method API​

None

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-bubble气泡组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-bubble {
  /* Write CSS styles here */
}
触发内容父元素.wd-bubble-child气泡插槽触发内容的父级元素，可以设置内容内部样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-bubble-child {
  /* Write CSS styles here */
}
PC 端气泡根元素.wd-pc-bubble可以为 PC 端的气泡编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-bubble {
  /* Write CSS styles here */
}
H5 端气泡根元素.wd-h5-bubble可以为 H5 端的气泡编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-bubble {
  /* Write CSS styles here */
}
气泡弹出层容器.wedatea2td-bubble可以为弹出的气泡设置样式，例如宽度，目前弹出的气泡最大宽度为 300px，可以设置max-width更改为其他宽度
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wedatea2td-bubble {
  /* Write CSS styles here */
}

Learn about Style API

CSS Variables​

.wd-bubble {
  // Tooltip top margin
  --wd-bubble-top: 0px;
  // Tooltip content left and right padding
  --wd-bubble-inner-horizontal-padding: 12px;
  // Tooltip content top and bottom padding
  --wd-bubble-inner-vertical-padding: 8px;
  // Tooltip content border-radius
  --wd-divider-inner-border-radius: 3px;
}

Version Changes​

None