Tooltips & Popovers

1

<p>Lorem ipsum dolor sit amet, <a href="#" data-original-title="Default tooltip" data-plugin-tooltip="tooltip">tooltip here</a> consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus <a href="#" data-original-title="Default tooltip" data-plugin-tooltip="tooltip">tooltip here</a> luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta.</p>

1
2
3
4
5
6
7
8

<div class="row">
    <div class="col-md-12">
        <button type="button" class="btn btn-default mr-lg pull-left" data-plugin-tooltip="tooltip" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on Left</button>
        <button type="button" class="btn btn-default mr-lg pull-left" data-plugin-tooltip="tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on Top</button>
        <button type="button" class="btn btn-default mr-lg pull-left" data-plugin-tooltip="tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on Bottom</button>
        <button type="button" class="btn btn-default mr-lg pull-left" data-plugin-tooltip="tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on Right</button>
    </div>
</div>

1

<a data-plugin-options="{'placement': 'right'}" tabindex="0" class="btn btn-primary mb-lg" role="button" data-plugin-popover="popover" data-toggle="popover" data-trigger="focus" title="Lorem ipsum dolor sit amet." data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Show Popover</a>