popover <> show code
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
How to use
Things to know when using the popover plugin:
- Popovers rely on the 3rd party library Tether for positioning. You must include tether.min.js before bootstrap.js in order for popovers to work!
- Popovers require the tooltip plugin as a dependency.
- Popovers are opt-in for performance reasons, so you must initialize them yourself.
- To initialize popover you need to write the following code in your main js file
$(function () { $('[data-toggle="popover"]').popover() })
Four directions <> show code
<!-- Popover on top -->
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<!-- Popover on right -->
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<!-- Popover on bottom -->
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<!-- Popover on left -->
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
How to use
- Use data-placement="" attribute value top right bottom left for popover direction
Example 2