-
Get Started
-
React Components
- Accordion
- Badge
- Block Title
- Block / Content Block
- Button
- Card
- Chips / Tags
- Floating Action Button
-
Forms
- Icon
- Grid / Layout Grid
-
Lists
- Link
- Messages
- Message Bar
-
Modals
-
Navigation Bars
- Pages
- Page
- Panel
- Photo Browser
- Preloader / Spinner
- Progress Bar
- Search Bar
- Status Bar
- Swiper
- Tabs
- Template7 Template
- Timeline
- Views
- View
Popover React Component
Popover compontent is used to manage the presentation of content in a popover. You use popovers to present information temporarily. The popover remains visible until the user taps outside of the popover window or you explicitly dismiss it.
Popover React component represents Popover component.
Usage example
<!-- Popover -->
<Popover>
<!-- Popover content goes here -->
</Popover>
Renders to:
<!-- Popover -->
<div class="popover">
<div class="popover-angle"></div>
<div class="popover-content">
<!-- Popover content goes here -->
</div>
</div>
Properties
Popover component has no any properties
Event Properties
Event | Description |
---|---|
onPopoverOpen | Event will be triggered when Popover starts its opening animation |
onPopoverOpened | Event will be triggered after Popover completes its opening animation |
onPopoverClose | Event will be triggered when Popover starts its closing animation |
onPopoverClosed | Event will be triggered after Popover completes its closing animation |
Open and close Popover
You can control Popover state, open and closing it:
- using its JavaScript API
- by clicking on Link or Button with relevant
openPopover
property (to open it) andclosePopover
property to close it