Popover – Basic, auto-close and hover popovers
From Bootstrap - Demo Wiki
| Component | ||
|---|---|---|
| Name | Popover | |
| Description | Basic, auto-close and hover popovers | |
| Provider | BootstrapComponents | |
| Reference | BootstrapComponents Extension docs - popover | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Basic Popover
- Code
<bootstrap_popover text="Click here!" heading="Header" color="success">This is the main content of the popover. It can have a lot more text than a simple tooltip. The larger the content is, the bigger the popover will be in order to accommodate all of it.<br/></br>You can even split the content in multiple lines and add images to it!<br/><br/>[[File:DSC02201 363.jpg|class=img-fluid]]
</bootstrap_popover>
- Result
Auto-close
- Code
<bootstrap_popover text="Focus on me!" heading="Header" trigger="focus">When you click anywhere after opening this popover, it will close automatically.
</bootstrap_popover>
- Result
Hover
- Code
<bootstrap_popover text="Hover over here!" header="Header" trigger="hover">To see this popup you didn't have to click the button, just hover over it.
</bootstrap_popover>
- Result
