Popover example 1
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
<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.
You can even split the content in multiple lines and add images to it!
</bootstrap_popover>
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
<bootstrap_popover text="Focus on me!" heading="Header" trigger="focus">When you click anywhere after opening this popover, it will close automatically. </bootstrap_popover>
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
<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>
