Tooltips

Left tooltip position

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

Top tooltip position

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

Right tooltip position

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

Bottom tooltip position

<button type="button" class="dg-btn-1 btn-accent radius-3px" data-toggle="tooltip" data-container="body" data-placement="bottom" title="Bottom tooltip">Tooltip<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="tooltip" data-placement="top" data-container="body" data-trigger="click" title="Some tooltip text">Tooltip<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="tooltip" data-placement="top" data-container="body" data-trigger="focus" title="Some tooltip text">Tooltip<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="tooltip" data-placement="top" data-container="body" data-trigger="hover" data-html="true" data-title='Tooltip with <u>HTML</u>'>Tooltip<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="tooltip" data-placement="top" data-container="body" data-trigger="hover" data-animation="false" title="Some tooltip text" >Tooltip<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="tooltip" data-placement="top" data-container="body" data-trigger="hover" data-delay="300" title="Delayed tooltip">Tooltip<i class="fa fa-play-circle-o ml"></i></button>

• Code
• Options

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

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

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

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

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

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