Flyouts, referred to as Popovers by Bootstrap, expose small overlays of content when an element is selected.
Toggle flyout
Four flyout directions are available: left, top, bottom, and right aligned. Indicate the direction in the data-placement attribute.
Flyout on left
Flyout on top
Flyout on bottom
Flyout on right
Indicate the flyout's color theme in the data-theme attribute.
Flyout in alt theme
{{#markdown}}
```xml
Toggle flyout
```
{{/markdown}}
{{#markdown}}
{{> flyout-guidance.md}}
{{/markdown}}
{{#markdown}}
```javascript
$(function () {
$('[data-toggle="popover"]').each(function () {
var $element = $(this);
$element.popover({
template: '
'
}).data('bs.popover').tip().addClass($element.data("theme"));
});
});
```
{{/markdown}}
Dismissible flyout
To dismiss flyouts on the next click, use the focus trigger.
Dismissible flyout
{{#markdown}}
{{> dismissible-flyout-guidance.md}}
{{/markdown}}
{{#markdown}}
```javascript
$(function () {
$('[data-toggle="popover"]').each(function () {
var $element = $(this);
$element.popover({
template: '
'
}).data('bs.popover').tip().addClass($element.data("theme"));
});
});
```
{{/markdown}}
Closing button
Adding a button inside of a flyout can be triggered with JavaScript. Insert id="#btn-close" within the html to call the flyout content specified in the script tags.
Flyout with button
{{#markdown}}
```xml
Flyout with button
```
{{/markdown}}
{{#markdown}}
{{> flyout-closing-button-guidance.md}}
{{/markdown}}
{{#markdown}}
```javascript
$(function () {
if ($('#btn-close').length) {
$('#btn-close').popover({
placement: 'right',
html: 'true',
content: 'This is a flyout with a button.
Button ',
template: '
'
}).data('bs.popover').tip().addClass($('#btn-close').data("theme"));
}
});
```
{{/markdown}}