@coreui/ajax
Version:
Open Source Bootstrap Admin Template
47 lines (43 loc) • 2.1 kB
HTML
<script>
var requireJS = [];
loadJS(requireJS, "js/views/popovers.js");
</script>
<div class="animated fadeIn">
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Popovers
<div class="card-actions">
<a href="http://coreui.io/docs/components/bootstrap-popover/popovers.html" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div>
<div class="card-body">
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover
</button>
<hr/>
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible
popover</a>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="fa fa-align-justify"></i> Popovers
<small>directions</small>
</div>
<div class="card-body">
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
</div>
</div>
</div>