Popovers
Popovers are small overlay content containers. Popovers component is built entirely in CSS.
top popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.
right popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.
bottom popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.
left popover
Apple
Software and hardware
To make a contribution to the world by making tools for the mind that advance humankind.
Wrap an element by a container with the popover
class.
And add a container with the popover-container
next to the element.
You can use Cards component inside the popover-container
.
Also, you can add the popover-right
, popover-bottom
or popover-left
class to define the position.
By default, the popovers appear above the element.
<div class="popover popover-right">
<button class="btn btn-primary">right popover</button>
<div class="popover-container">
<div class="card">
<div class="card-header">
...
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
...
</div>
</div>
</div>
</div>