Popover is a non-modal block that pops up on the screen as you click somewhere. Popovers point to the button or link that was clicked to make them appear, which gives the popover context.
Popovers can have some additional information or a form inside. Generally it’s better to use a popover than a dialog box in most cases, because a popover isn’t modal, it doesn’t interrupt a user as much as a dialog box. Popovers should always provide context by pointing to the control or object that triggered them.
Popovers are best used for setting up the view of what’s on the screen. In this case a user can see the result immediately after changing a setting in a popover
<button data-target="#popover1" class="sn-popover-basic btn btn-default" data-toggle="popover"> Basic Popover</button>
<div id="popover1">
<div class="popover-body"> This is a basic popover, with a basic popover close button.<br /><br />
<button class="btn btn-default" data-dismiss="popover"> Close</button>
</div>
</div>
<button data-toggle="popover" data-target="#popover2" data-placement="right" class="sn-popover-basic btn btn-default">Popover with header/footer</button>
<div id="popover2">
<div class="popover-header popover-header-buttons">
<h4>Popover Header</h4>
<div class="pull-right">
<button class="btn btn-default" data-dismiss="popover">
Close
</button>
<button class="btn btn-primary" data-dismiss="popover">
Save
</button>
</div>
</div>
<div class="popover-body">
<legend>
<label for="popover_input1">Input</label>
</legend>
<div class="row">
<input name="popover_input1" id="popover_input1"
class="form-control"
value="This is an entered value"/>
</div>
</div>
</div>
<button data-target="#popover3" class="sn-popover-basic btn btn-default" data-toggle="popover"> Popover Elements</button>
<div id="popover3">
<header>Popover elements list</header>
<div class="popover-body">
<form>
<input name="sysparm_ck" id="sysparm_ck" type="hidden" value="267fdef29f13210043e276d7677fcfbe91e7e55c5780760508918c3d390178f0c6951b42">
<legend>Items</legend>
<ul>
<li class="row cell-default">
<label class="cell-title">Item with Short Text</label>
<p class="cell-content">Sollicitudin Parturient Cursus</p>
</li>
<li class="row cell-default">
<div>
<label class="cell-title">Item with Long Text</label>
<p class="cell-content">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</li>
</ul>
<legend>Grouped Switches</legend>
<div class="row">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label for="popover_switch1" class="pull-left"> Normal</label>
<div class="input-switch pull-right">
<input id="popover_switch1" type="checkbox" checked="checked" name="popover_switch1">
<label aria-hidden="true" class="switch" for="popover_switch1"></label>
</div>
</div>
<div class="row">
<label for="popover_switch2" class="pull-left"> Normal</label>
<div class="input-switch pull-right">
<input id="popover_switch2" type="checkbox" checked="checked" name="popover_switch2">
<label aria-hidden="true" class="switch" for="popover_switch2"></label>
</div>
</div>
<legend>Reorderable Items</legend>
<ul>
<li class="row">
<div>
<span class="label pull-left">Item 1</span>
<span class="icon-drag icon-lg drag-handle pull-right" aria-label="Reorder Item 1"></span>
</div>
</li>
<li class="row">
<div>
<span class="label pull-left">Item 2</span>
<span class="icon-drag icon-lg drag-handle pull-right" aria-label="Reorder Item 2"></span>
</div>
</li>
</ul>
<legend>Deleteable Items</legend>
<div class="row">
<button class="icon-delete icon-lg delete-button btn btn-icon pull-left" aria-label="Delete Item 1"></button>
<label for="popover_switch2" class="pull-left"> Item 1</label>
</div>
<div class="row">
<button class="icon-delete icon-lg delete-button btn btn-icon pull-left" aria-label="Delete Item 2"></button>
<label for="popover_switch2" class="pull-left"> Item 2</label>
</div>
<legend>Reorderable/Deleteable Items</legend>
<ul>
<li class="row">
<button class="icon-delete icon-lg delete-button btn btn-icon pull-left" aria-label="Delete Item 2"></button>
<span class="label pull-left">Item 1</span>
<span class="icon-drag icon-lg drag-handle pull-right" aria-label="Reorder Item 1"></span>
</li>
<li class="row">
<button class="icon-delete delete-button btn btn-icon icon-lg pull-left" aria-label="Delete Item 2"></button>
<span class="label pull-left">Item 2</span>
<span class="icon-drag icon-lg drag-handle pull-right" aria-label="Reorder Item 2"></span>
</li>
</ul>
<legend>Check boxes</legend>
<div class="row">
<span class="input-group-checkbox">
<input id="popover_checkbox1" class="checkbox pull-right" type="checkbox" checked="checked" name="popover_checkbox1">
<label for="popover_checkbox1" class="pull-left checkbox-label">Normal</label>
</span>
</div>
<div class="row">
<span class="input-group-checkbox">
<input id="popover_checkbox1" class="checkbox pull-right" type="checkbox" name="popover_checkbox1">
<label for="popover_checkbox1" class="pull-left checkbox-label">Normal</label>
</span>
</div>
<div class="row">
<span class="input-group-checkbox">
<input id="popover_checkbox1" class="checkbox pull-right" type="checkbox" checked="checked" name="popover_checkbox1">
<label for="popover_checkbox1" class="pull-left checkbox-label">Normal</label>
</span>
</div>
<legend>Items</legend>
<div class="form-group">
<a tabindex="0" href="#" class="drilldown-button">
<span class="label pull-left">Drillable item</span>
<i class="icon-chevron-right icon-lg pull-right"></i>
</a>
</div>
<div class="form-group">
<a tabindex="0" href="#" class="drilldown-button">
<span class="label pull-left">Drillable item w/ value</span>
<i class="icon-chevron-right icon-lg pull-right"></i>
<span class="pull-right label drilldown-value">100</span>
</a>
</div>
<div tabindex="0" class="form-group">
<span class="label pull-left">Drillable item w/ info</span>
<i class="icon-info icon-lg pull-right"></i>
</div>
<legend>Radio Selects</legend>
<div class="row">
<span class="input-group-radio">
<input id="popover_radio1" class="radio" type="radio" name="popover_radio1">
<label for="popover_radio1" class="radio-label"> Item 1</label>
</span>
</div>
<div class="row">
<span class="input-group-radio">
<input id="popover_radio2" class="radio" type="radio" checked="checked" name="popover_radio1">
<label for="popover_radio2" class="radio-label"> Item 2</label>
</span>
</div>
<div class="row">
<span class="input-group-radio">
<input id="popover_radio3" class="radio" type="radio" name="popover_radio1">
<label for="popover_radio3" class="radio-label"> Item 3</label>
</span>
</div>
</form>
</div>
<footer> </footer>
</div>
This popover gives you control on the look of a task board. All the changes are applied immediately, without having to save them.
This popover lets you configure the scorecards' list in Performance Analytics: which indicators to show, what information about them to display and how to display it. All the changes are applied instantly.