Popover – Popovers with different sizes and placement
From Bootstrap - Demo Wiki
| Component | ||
|---|---|---|
| Name | Popover | |
| Description | Popovers with different sizes and placement | |
| Provider | BootstrapComponents | |
| Reference | BootstrapComponents Extension docs - popover | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Different sizes
- Code
<bootstrap_popover text="Small" heading="Header" size="sm">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.</bootstrap_popover>
<bootstrap_popover text="Medium" heading="Header" size="md">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.</bootstrap_popover>
<bootstrap_popover text="Large" heading="Header" size="lg">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.</bootstrap_popover>
- Result
Different placement
- Code
<bootstrap_popover text="Top" heading="Header" placement="top">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.</bootstrap_popover>
<bootstrap_popover text="Right" heading="Header" placement="right">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.</bootstrap_popover>
<bootstrap_popover text="Bottom" heading="Header" placement="bottom">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.</bootstrap_popover>
<bootstrap_popover text="Left" heading="Header" placement="left">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.</bootstrap_popover>
- Result
