Tooltips & Popovers

Tooltips & Popovers Shortcodes

Check out all the Tooltips & Popovers options.


Default

Lorem ipsum dolor sit amet, tooltip here 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 tooltip here 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.

HTML Shortcode

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>

Positions

HTML Shortcode

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>

Popover

HTML Shortcode

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>