Popovers
Click to preview the Popovers demo. View demo
Tooltip positions
Code:
html
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="top" title="Popover top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="left" title="Popover left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="right" title="Popover right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="bottom" title="Popover bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>Popover positions
Code:
html
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="right" data-trigger="click" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="right" data-trigger="focus" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-html="true" title="Popover title" data-content='Add <u>some</u> HTML stuff.'>Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-animation="false" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-delay="300" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>Popover options
Code:
html
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-header="bg-accent" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-header="bg-primary" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-header="bg-success" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-header="bg-info" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-header="bg-warning" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-header="bg-danger" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>Custom header color
Code:
html
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-bg="bg-accent" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-bg="bg-primary" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-bg="bg-success" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-bg="bg-info" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-bg="bg-warning" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>
<button type="button" class="btn btn-default" data-toggle="popover" data-container="body" data-placement="right" data-trigger="hover" data-bg="bg-danger" title="Popover title" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Popover<i class="fa fa-play-circle-o ml"></i></button>