---
categories: [Widgets]
layout: page
title: Popovers
resource: true
---
<p>Note: To display the close (X) icon in popovers, add data attribute <strong>data-close="true"</strong> to the trigger button element.</p>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on right with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Popover on right with title and close button</a>
</div>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true">Popover on right with close button</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on right with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Popover on right with title</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy.">Popover on right</a>
</div>
<hr>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="left">Popover on left with title and close button</a>
</div>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="left">Popover on left with close button</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="left">Popover on left with title</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="left">Popover on left</a>
</div>
<hr>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="top">Popover on top with title and close button</a>
</div>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="top">Popover on top with close button</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on top with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="top">Popover on top with title</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about dataa smartproxy." data-placement="top">Popover on top</a>
</div>
<hr>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on left with title and close button" data-content="This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="bottom">Popover on bottom with title and close button</a>
</div>
<div class="bs-example" style="margin-top: 40px;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Close icon with no Title text. This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-close="true" data-placement="bottom">Popover on bottom with close button</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="Popover on bottom with title" data-content="Popover with no Close icon.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="bottom">Popover on bottom with title</a>
</div>
<div class="bs-example" style="margin: 40px 0;">
<a href="#" class="btn btn-default" data-toggle="popover" data-html="true" title="" data-content="Empty Title example.<br>This is more information about a smartproxy. This is more information about a smartproxy. This is more information about a smartproxy." data-placement="bottom">Popover on bottom</a>
</div>
<hr>
{% include widgets/forms/field-level-help.html id="fieldlevelhelp" %}