stable 1.0.0

Popover

A rich, anchored panel. A trigger opens a ng-popover that positions itself next to it, flipping to stay in view. Link ng_popover.js.

A trigger references the popover by id with data-ng-popover-open="#id". The popover holds a ng-popover-content and an optional ng-popover-arrow; placement, trigger mode and dismissal are set with data-ng-popover-* on the root.

Basic

popover.html

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-popover-open="#pop-basic">Open popover</button>

<div class="ng-popover with-arrow " id="pop-basic">
    <div class="ng-popover-content">
        <p>Anchored content with an arrow, positioned and flipped automatically.</p>
    </div>
    <div class="ng-popover-arrow"></div>
</div>

Placement

Set the side with data-ng-popover-placement (top, bottom default, left, right, plus -start/-end).

popover.html

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-popover-open="#pop-top">Top</button>

<div class="ng-popover with-arrow " id="pop-top" data-ng-popover-placement="top">
    <div class="ng-popover-content">
        <p>Anchored content with an arrow, positioned and flipped automatically.</p>
    </div>
    <div class="ng-popover-arrow"></div>
</div>

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-popover-open="#pop-right">Right</button>

<div class="ng-popover with-arrow " id="pop-right" data-ng-popover-placement="right">
    <div class="ng-popover-content">
        <p>Anchored content with an arrow, positioned and flipped automatically.</p>
    </div>
    <div class="ng-popover-arrow"></div>
</div>

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-popover-open="#pop-left">Left</button>

<div class="ng-popover with-arrow " id="pop-left" data-ng-popover-placement="left">
    <div class="ng-popover-content">
        <p>Anchored content with an arrow, positioned and flipped automatically.</p>
    </div>
    <div class="ng-popover-arrow"></div>
</div>

Hover trigger

Open on hover with data-ng-popover-trigger="hover" (default click).

popover.html

<button type="button" class="ng-btn ng-btn-primary-outline" data-ng-popover-open="#pop-hover">Hover me</button>

<div class="ng-popover with-arrow " id="pop-hover" data-ng-popover-trigger="hover">
    <div class="ng-popover-content">
        <p>Anchored content with an arrow, positioned and flipped automatically.</p>
    </div>
    <div class="ng-popover-arrow"></div>
</div>

Anatomy

ng-popover ng-popover-content ng-popover-arrow data-ng-popover-open="#id"

Options & modifiers

data-ng-popover-placement data-ng-popover-trigger data-ng-popover-dismiss data-ng-popover-modal with-arrow sm lg no-shadow is-open

Events

ng:popover:open ng:popover:close

Reference

Generated from the component source (_ng_popover.scss · ng_popover.js).

Component info

Name	`popover`
Type	`css+js`
Version	`1.0.0`
Status	`stable`
CSS	`/assets/css/components/_ng_popover.scss`
JS	`/assets/js/ng_popover.js`

Classes

.ng-popover .ng-popover-arrow .ng-popover-content

Tokens

--ng-pop-arrow-size --ng-pop-bg --ng-pop-border --ng-pop-color --ng-pop-max-width --ng-pop-min-width --ng-pop-offset --ng-pop-padding --ng-pop-transition-speed --ng-pop-translate

Events

ng:popover:close ng:popover:open