Tooltips

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-placement="left" data-toggle="tooltip" title="Left tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Top tooltip position

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-placement="top" data-toggle="tooltip" title="Top tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Right tooltip position

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-placement="right" data-toggle="tooltip" title="Right tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Bottom tooltip position

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-placement="bottom" data-toggle="tooltip" title="Bottom tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="click" title="Some tooltip text" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Focus trigger

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="focus" title="Some tooltip text" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

HTML support

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-html="true" data-placement="top" data-title="Tooltip with <u>HTML</u>" data-toggle="tooltip" data-trigger="hover" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Disabled animation

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-animation="false" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="hover" title="Some tooltip text" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Delayed tooltip

<button class="dg-btn-1 btn-accent size-sm radius-3px" data-container="body" data-delay="300" data-placement="top" data-toggle="tooltip" data-trigger="hover" title="Delayed tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

<button class="dg-btn-default size-sm radius-3px" data-bg="bg-accent" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="hover " title="Default tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Primary tooltip

<button class="dg-btn-default size-sm radius-3px" data-bg="bg-primary" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="hover " title="Primary tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Success tooltip

<button class="dg-btn-default size-sm radius-3px" data-bg="bg-success" data-container="body" data-placement="top" data-title="Success tooltip" data-toggle="tooltip" data-trigger="hover " type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Info tooltip

<button class="dg-btn-default size-sm radius-3px" data-bg="bg-info" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="hover " title="Info tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Warning tooltip

<button class="dg-btn-default size-sm radius-3px" data-bg="bg-warning" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="hover" title="Warning tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

Danger tooltip

<button class="dg-btn-default size-sm radius-3px" data-bg="bg-danger" data-container="body" data-placement="top" data-toggle="tooltip" data-trigger="hover" title="Danger tooltip" type="button">Tooltip<i class="fa fa-play-circle-o ml"></i></button>