How to use the full content of the bubble prompt

1. Scenario

When a custom page displays data in a loop, when the data content is too long, the display is incomplete. In this case, we can use the bubble prompt, the complete content is automatically displayed when the mouse is crossed.

2. Video Display

Updating, please look forward ~

3. Implementation steps

3.1 configure the bubble prompt component

3.1.1 add containers, put and configure bubble prompt components

Figure 3.1.1-1 drag bubble Assembly

When you open the outline tree, you can see the trigger element layer and the bullet layer under the bubble prompt. The trigger element layer is used to place the trigger content displayed on the page, the pop-up layer is used to display the contents of the pop-up box.

Figure 3.1.1-2 view the bubble prompt component in the outline tree

3.1.2 configure the bubble prompt component

You need to change the trigger behavior to "Hover". Bubbles can pop up when the mouse is crossed.

Figure 3.1.2-1 configure bubble prompt properties

3.2 configure to display data in a loop at the trigger element layer

3.2.1 drag the text component and place it in the trigger element

Drag the text component to the page. Find the text component in the outline tree and drag the text component to the trigger element in the outline tree.

Figure 3.2.1-1 adjust the position of the text component

Adjust the style of the text component. The style can be adjusted freely.

Figure 3.2.1-2 adjust the style of text components

3.2.2 create a variable data source and add test data

Figure 3.2.2-1 add variable data source

For more information about the test data, see the following:

[
  {
  "name":"测试AAAAAAAAAAAA"
  },
  {
  "name":"测试BBBBBBBBBBBB"
  },
  {
  "name":"测试CCCCCCCCCCCC"
  },
  {
  "name":"测试DDDDDDDDDDDDD"
  },
  {
  "name":"测试EEEEEEEEEEEEE"
  },
  {
  "name":"测试FFFFFFFFFFFFF"
  },
]

3.2.3 bind containers to variable data sources

Bind the created variable data source to the outermost container, and the data in the variable data source will be displayed in the component loop in the container.

Figure 3.2.3-1 bind variable data sources

3.2.4 bind the text component in the trigger element to the circular data content

After the container binds the variable data source, the iteration variable is named item. The text needs to be bound to the name value in the variable data source, so the text is bound to item.name.

Figure 3.2.4-1 content in the text binding variable data source

3.2.5 The Display effect of circular data is as follows

Figure 3.2.5-1 display effect of cyclic data

3.3 configure bubble pop-up layer content

3.3.1 drag the text component and place it in the trigger element

Drag the text component to the page. Find the text component in the outline tree and drag the text component to the pop-up layer in the outline tree.

Figure 3.3.1-1 adjust the position of text components

Adjust the style of the text component. The style can be adjusted freely.

Figure 3.3.1-2 adjust the style of text components

3.3.2 bind text components in the pop-up layer to circular data content

After the container binds the variable data source, the iteration variable is named item. The text needs to be bound to the name value in the variable data source, so the text is bound to item.name.

Figure 3.3.2-1 the content of the text binding variable data source

4. Effect display

Figure 4-1 shows the effect

5. Try it online

For online experience, please go to the Developer Center.👉How to use the full content of the bubble prompt

https://www.aliwork.com/bench/coe? tplUuid=TPL_T5X4BNF7CDGI7BOAQG8C

-------------------- Get the latest information YIDA, welcome to follow US--------------------