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

On latency (ms)	openDelay	number	Bubble prompt on latency (ms) 0
Shutdown delay (ms)	closeDelay	number	Bubble prompt off latency (ms) Default value: 200
Does the arrow point to the center	arrowPointAtCenter	boolean	Does the arrow in the bubble prompt point to the center
Trigger an action	trigger	string	Behavior that triggers a bubble prompt Default value: "hover"
outbound	placement	string	Bubble prompt popup direction Default value: "top"
Bubble style	promptTheme	string	Bubble prompt style 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

Enable bubble	open		Web	-
Close bubble	close		Web	-

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

Trigger an action	trigger	string	Behavior that triggers a bubble prompt
outbound	placement	string	Bubble prompt popup direction
Bubble style	promptTheme	string	Bubble prompt style

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

root element	.wd-bubble	bubble component root element /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-bubble { /* Write CSS styles here */ }
Triggering content Parent element	.wd-bubble-child	Bubble slot trigger content parent element, can be set inside style /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope .wd-bubble-child { /* Write CSS styles here */ }
PC bubble root element	.wd-pc-bubble	Write style for PC bubble /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-pc-bubble { /* Write CSS styles here */ }
H5 bubble root element	.wd-h5-bubble	Write style for H5 bubble /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-h5-bubble { /* Write CSS styles here */ }
bubble popup layer container	.wedatea2td-bubble	The pop-up bubble style can be set, such as width. The current maximum width is 300px. The max-width can be changed to another value. /* :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