Version 3.0.6

Popoversv2.9.0+

Add overlay content to any element for housing secondary information. Common examples include Default Popover, Popover with Action Info, Popover with Scores, and Popover with Stats. For more information on follow buttons, see Follow Button States.

SJSally Jones

                      
<div class="popover right">
<div class="popover-inner">
<h2 class="popover-title">
<span class="user-icon green">SJ</span>
<a class="title-text" href="javascript:void(0);">Sally Jones</a>
</h2>
<div class="popover-content">
<ul class="popover-info-list">
<li>
<span class="glyphicons glyphicons-nameplate-alt" aria-hidden="true"></span> Big Donor, Gun Activist, Pet Owner
</li>
<li>
<span class="glyphicons glyphicons-map-marker" aria-hidden="true"></span>
<a href="javascript:void(0);">50 Main St, Somerville MA 02144</a>
</li>
<li>
<span class="glyphicons glyphicons-nameplate-earphone" aria-hidden="true"></span> (617) 555-1234
</li>
<li>
<span class="glyphicons glyphicons-envelope" aria-hidden="true"></span>
<a href="javascript:void(0);">sjones@gmail.com</a>
</li>
</ul>
<div class="popover-footer panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray btn-sm">View Details</button>
<button class="btn btn-blue btn-ghost btn-sm">
<span class="glyphicons glyphicons-plus" aria-hidden="true"></span> Follow
</button>
</div>
</div>
</div>
</div>
</div>

SJSally Jones

Latest Contribution

$20
Save the Animals! Contribution Form
Mar 8, 2016 3:35PM
                      
<div class="popover right">
<div class="popover-inner">
<h2 class="popover-title">
<span class="user-icon green">SJ</span>
<a class="title-text" href="javascript:void(0);">Sally Jones</a>
</h2>
<div class="popover-content">
<ul class="popover-info-list">
<li>
<span class="glyphicons glyphicons-nameplate-alt" aria-hidden="true"></span> Big Donor, Gun Activist, Pet Owner
</li>
<li>
<span class="glyphicons glyphicons-map-marker" aria-hidden="true"></span>
<a href="javascript:void(0);">50 Main St, Somerville MA 02144</a>
</li>
<li>
<span class="glyphicons glyphicons-nameplate-earphone" aria-hidden="true"></span> (617) 555-1234
</li>
<li>
<span class="glyphicons glyphicons-envelope" aria-hidden="true"></span>
<a href="javascript:void(0);">sjones@gmail.com</a>
</li>
</ul>
<div class="popover-section">
<h3 class="section-title">Latest Contribution</h3>
<div class="section-data">$20</div>
<div class="section-text">
<a href="javascript:void(0);">Save the Animals!</a> Contribution Form
<br /> Mar 8, 2016 3:36PM
</div>
</div>
<div class="popover-footer panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray btn-sm">View Details</button>
<button class="btn btn-blue btn-ghost btn-sm">
<span class="glyphicons glyphicons-plus" aria-hidden="true"></span> Follow
</button>
</div>
</div>
</div>
</div>

SJSally Jones

Score Name97.2
Score Name53.5
Score Name26.1
                      
<div class="popover right">
<div class="popover-inner">
<h2 class="popover-title">
<span class="user-icon green">SJ</span>
<a class="title-text" href="javascript:void(0);">Sally Jones</a>
</h2>
<div class="popover-content">
<ul class="popover-info-list">
<li>
<span class="glyphicons glyphicons-nameplate-alt" aria-hidden="true"></span> Big Donor, Gun Activist, Pet Owner
</li>
<li>
<span class="glyphicons glyphicons-map-marker" aria-hidden="true"></span>
<a href="javascript:void(0);">50 Main St, Somerville MA 02144</a>
</li>
<li>
<span class="glyphicons glyphicons-nameplate-earphone" aria-hidden="true"></span> (617) 555-1234
</li>
<li>
<span class="glyphicons glyphicons-envelope" aria-hidden="true"></span>
<a href="javascript:void(0);">sjones@gmail.com</a>
</li>
</ul>
<div class="popover-section">
<div class="popover-score">
<span class="section-title">Score Name</span>
<span class="section-data">97.2</span>
</div>
<div class="popover-score">
<span class="section-title">Score Name</span>
<span class="section-data">53.5</span>
</div>
<div class="popover-score">
<span class="section-title">Score Name</span>
<span class="section-data">26.1</span>
</div>
</div>
<div class="popover-footer panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray btn-sm">View Details</button>
<button class="btn btn-blue btn-ghost btn-sm">
<span class="glyphicons glyphicons-plus" aria-hidden="true"></span> Follow
</button>
</div>
</div>
</div>
</div>
</div>

SJSally Jones

Invited
Scheduled
Confirmed
Completed
                      
<div class="popover right">
<div class="popover-inner">
<h2 class="popover-title">
<span class="user-icon green">SJ</span>
<a class="title-text" href="javascript:void(0);">Sally Jones</a>
</h2>
<div class="popover-content">
<ul class="popover-info-list">
<li>
<span class="glyphicons glyphicons-nameplate-alt" aria-hidden="true"></span> Big Donor, Gun Activist, Pet Owner
</li>
<li>
<span class="glyphicons glyphicons-map-marker" aria-hidden="true"></span>
<a href="javascript:void(0);">50 Main St, Somerville MA 02144</a>
</li>
<li>
<span class="glyphicons glyphicons-nameplate-earphone" aria-hidden="true"></span> (617) 555-1234
</li>
<li>
<span class="glyphicons glyphicons-envelope" aria-hidden="true"></span>
<a href="javascript:void(0);">sjones@gmail.com</a>
</li>
</ul>
<div class="popover-section">
<div class="popover-stats">
<div class="popover-stat">
<div class="section-data">
<a href="javascript:void(0);">35</a>
</div>
<div class="section-text">Invited</div>
</div>
<div class="popover-stat">
<div class="section-data">
<a href="javascript:void(0);">12</a>
</div>
<div class="section-text">Scheduled</div>
</div>
<div class="popover-stat">
<div class="section-data">
<a href="javascript:void(0);">11</a>
</div>
<div class="section-text">Confirmed</div>
</div>
<div class="popover-stat">
<div class="section-data">
<a href="javascript:void(0);">0</a>
</div>
<div class="section-text">Completed</div>
</div>
</div>
</div>
<div class="popover-footer panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray btn-sm">View Details</button>
<button class="btn btn-blue btn-ghost btn-sm">
<span class="glyphicons glyphicons-plus" aria-hidden="true"></span> Follow
</button>
</div>
</div>
</div>
</div>
</div>

                      
<div class="popover right">
<div class="popover-inner loading">
<h2 class="popover-title">
<span class="user-icon"></span>
<span class="title-text"></span>
</h2>
<div class="popover-content">
<ul class="popover-info-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>

Search Results

Powered by