Tooltips & Popovers

1
2
3
4
5
6
7

<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

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

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>