patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
73 lines • 7.97 kB
HTML
---
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="" 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-original-title="Popover on right with title and close button" 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="" 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-original-title="Popover on right with title">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="" 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-original-title="Popover on left with title and close button" 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="" 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-original-title="Popover on left with title" 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="" 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-original-title="Popover on left with title and close button" 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="" 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-original-title="Popover on top with title" 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 a 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="" 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-original-title="Popover on left with title and close button" 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="" 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-original-title="Popover on bottom with title" 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>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="textInput">Default <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" title="" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <a href='#'>dolore magna aliqua</a>." data-placement="top"><span class="fa fa-info-circle"></span></a></label>
<div class="col-sm-10">
<input type="text" id="textInput" class="form-control">
</div>
</div>
</form>
<script>
// Initialize Popovers
$(document).ready(function() {
$('[data-toggle=popover]').popovers()
});
</script>