Popover

Definition: A popover displays information about the targeted UI element.

Popovers are used when the information is only temporarily needed by the user and requires a longer explanation than is possible to put in a tooltip.


                                                        
                                                        
                                                            <div class="popover" role="tooltip">
                                                            <div class="arrow"></div>
                                                            <h3 class="popover-header">Popover title</h3>
                                                            <div class="popover-content">
                                                                ...
                                                            </div>
                                                        </div>

Storybook failed to load. Please connect to the VPN to access.

On default state is hidden, to be visible add .in class.


                                                        
                                                        
                                                            <div class="popover in" role="tooltip">
                                                            ...
                                                        </div>

Add .top, .right, .bottom or .left class to the popover wrapper.


                                                        
                                                        
                                                            <div class="popover top in" role="tooltip">
                                                            <div class="arrow"></div>
                                                            <h3 class="popover-header">Popover title</h3>
                                                            <div class="popover-content">
                                                                ...
                                                            </div>
                                                        </div>

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.

Popover

Popover position

VUD Product Design System

Resources

Support