1.Popover bubble card
Click/Move the mouse into the element, and a bubble-like floating layer of cards will pop up.
2. When to use
When the target element has further description and related operations, it can be stored in the card and displayed according to the user's operation behavior.
The difference from Tooltip is that users can operate elements on the floating layer, so it can carry more complex content, such as links or buttons.
The component code comes from: Bubble Card Popover - Ant Design
3. Preparation before local verification
Refer to the article [react project + antd component-demo:hello-world react project + antd component-demo:hello-world_Western Jin's no1 blog-CSDN blog ], popover the bubble card - the code that needs to be used locally in Ant Design Copy and cover all the codes in App2.js , start the code, you can view the phenomenon and change the code locally.
4. Simple usage of local verification Popover .
Copy the code shown in the figure below to understand the simple usage of Popover. Note that some codes on the way are deleted.
5. View the usage of the 3 trigger methods
Copy the code shown in the figure below to understand the three triggering methods of Popover. For specific methods, please refer to: Text Prompt Tooltip - Ant Design
6. View the method of setting the 12 directions of the bubble: placement
Copy the code shown in the figure below to learn how to set the 12 directions of the bubble: placement.
The position of the bubble box, optional top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom.
For specific usage, refer to the following source code, or: text prompt Tooltip - Ant Design
This article only introduces part of the Popover component. For more information, please refer to the official document: Bubble Card Popover - Ant Design