Tooltips
Click to preview the Tooltips demo. View demo
Tooltip positions
Code:
html
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>Tooltip options
Code:
html
<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>