Popovers

Popover top

<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>

Popover left

<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>

Popover right

<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>

Popover bottom

<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>

Click trigger

<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>

Focus trigger

<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>

HTML support

<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>

Disabled animation

<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>

Delayed tooltip

<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>

• Code
• Options

<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>

• Code
• Options

<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>