Popover

Add small overlay content, like those found in iOS, to any element for housing secondary information.

The easiest way to add the popover component to your app (will be added to the root module)

Basic
#

<button type="button" class="btn btn-primary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'">
  Live demo
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-basic',
  templateUrl: './basic.html',
  standalone: false
})
export class DemoPopoverBasicComponent {}

Placement
#

Four base positioning options are available: top, right, bottom, and left. Besides that, auto option may be used to detect a position that fits the component on screen.

<button type="button" class="btn btn-default btn-secondary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Popover on top"
        placement="top">
  Popover on top
</button>

<button type="button" class="btn btn-default btn-secondary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Popover on right"
        placement="right">
  Popover on right
</button>

<button type="button" class="btn btn-default btn-secondary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Popover auto"
        placement="auto">
  Popover auto
</button>

<button type="button" class="btn btn-default btn-secondary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Popover on left"
        placement="left">
  Popover on left
</button>

<button type="button" class="btn btn-default btn-secondary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Popover on bottom"
        placement="bottom">
  Popover on bottom
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-placement',
  templateUrl: './placement.html',
  standalone: false
})
export class DemoPopoverPlacementComponent {}

Corner placement
#

Placement property of a popover can contain "corner placement" specifier following the base positioning. Thus, in addition to the four base positioning options, namely top, right, bottom, and left, eight more positioning options are available: top left, top right, right top, right bottom, bottom right, bottom left, left bottom, and left top.

<p>
  <select [(ngModel)]="placement" class="form-control">
    @for (placement of placements; track placement) {
      <option
        [value]="placement">
        {{ placement }}
      </option>
    }
  </select>
</p>
<button type="button" class="btn btn-default btn-secondary"
  [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
  [popoverTitle]="'Popover on ' + placement"
  [placement]="placement">
  {{ 'Popover on ' + placement }}
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-corner-placement',
  templateUrl: './corner-placement.html',
  standalone: false
})
export class DemoPopoverCornerPlacementComponent {
  placements = [
    'top left',
    'top right',
    'right top',
    'right bottom',
    'bottom right',
    'bottom left',
    'left bottom',
    'left top'
  ];
  placement: "top" | "bottom" | "left" | "right" | "auto" | "top left" | "top right" | "right top" | "right bottom" | "bottom right" | "bottom left" | "left bottom" | "left top" = 'top left';
}

Disable adaptive position
#

You can disable adaptive position via adaptivePosition input or config option

<button type="button" class="btn btn-default btn-secondary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Popover on top"
        [adaptivePosition]="false"
        placement="top">
  Popover on top
</button>

<button type="button" class="btn btn-default btn-secondary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Popover on right"
        [adaptivePosition]="false"
        placement="right">
  Popover on right
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-adaptive-position',
  templateUrl: './adaptive-position.html',
  standalone: false
})
export class DemoPopoverAdaptivePositionComponent {}

Adaptive position with overflow boundary
#

You can control the popover boundaries via boundariesElement input or config option. boundariesElement property of a popover can contain boundaries namely viewport, scrollParent, window.

<div class="container">

    <div class="btn-padding">
        <button type="button" class="btn btn-default btn-secondary"
            [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'" popoverTitle="Popover on top"
            [adaptivePosition]="true" container="body" boundariesElement="viewport" placement="top">
            Popover on top
        </button>

        <button type="button" class="btn btn-default btn-secondary"
            [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'" popoverTitle="Popover on bottom"
            [adaptivePosition]="true" container="body" boundariesElement="viewport" placement="bottom">
            Popover on bottom
        </button>
    </div>

</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-adaptive-position-overflow-boundary',
  templateUrl: './adaptive-position-overflow-boundary.html',
  styleUrls: ['./adaptive-position-overflow-boundary.css'],
  standalone: false
})
export class DemoAdaptivePositionOverflowBoundaryComponent {}

Use the focus trigger to dismiss popovers on the next click that the user makes.

<button type="button" class="btn btn-success"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        popoverTitle="Dismissible popover"
        triggers="focus">
  Dismissible popover
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-dismiss',
  templateUrl: './dismiss.html',
  standalone: false
})
export class DemoPopoverDismissComponent {}

Dynamic content
#

Pass a string as popover content.

<button type="button" class="btn btn-info"
        [popover]="content" [popoverTitle]="title">
  Simple binding
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-dynamic',
  templateUrl: './dynamic.html',
  standalone: false
})
export class DemoPopoverDynamicComponent {
  title = 'Welcome word';
  content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
}

Custom content template
#

Create <ng-template #myId> with any html allowed by Angular, and provide template ref [popover]="myId" as popover content.

<ng-template #popTemplate>Just another: {{content}}</ng-template>
<button type="button" class="btn btn-warning"
        [popover]="popTemplate" popoverTitle="Template ref content inside">
  TemplateRef binding
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-custom-content',
  templateUrl: './custom-content.html',
  standalone: false
})
export class DemoPopoverCustomContentComponent {
  title = 'Welcome word';
  content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
}

Dynamic Html
#

By using [innerHtml] inside ng-template you can display any dynamic html

<ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div></ng-template>
<button type="button" class="btn btn-success"
        [popover]="popTemplate" popoverTitle="Dynamic html inside">
  Show me popover with html
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-dynamic-html',
  templateUrl: './dynamic-html.html',
  standalone: false
})
export class DemoPopoverDynamicHtmlComponent {
  html = `<span class="btn btn-danger">Never trust not sanitized HTML!!!</span>`;
}

Append to body
#

When you have any styles on a parent element that interfere with a popover, you’ll want to specify a container="body" so that the popover’s HTML will be appended to body. This will help to avoid rendering problems in more complex components (like input groups, button groups, etc) or inside elements with overflow: hidden

<div class="row panel" style="position: relative; overflow: hidden;">
  <div class="card-block panel-body">
    <button type="button" class="btn btn-danger"
            [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'">
      Default popover
    </button>
    <button type="button" class="btn btn-success"
            [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
            container="body">
      Popover appended to body
    </button>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-container',
  templateUrl: './container.html',
  standalone: false
})
export class DemoPopoverContainerComponent {}

Visibility events
#

Event:

<button type="button" class="btn btn-primary"
        (onShown)="onShown()" (onHidden)="onHidden()"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'">
  Live demo
</button>
<br>
<br>
<pre class="card card-block card-header mb-3">Event: {{message}}</pre>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-events',
  templateUrl: './events.html',
  standalone: false
})
export class DemoPopoverEventsComponent {
  message?: string;

  onShown(): void {
    this.message = 'shown';
  }

  onHidden(): void {
    this.message = 'hidden';
  }
}

Configuring defaults
#

<button type="button" class="btn btn-primary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'">
  Preconfigured popover
</button>

import { Component } from '@angular/core';
import { PopoverConfig } from 'ngx-bootstrap/popover';

// such override allows to keep some initial values

export function getPopoverConfig(): PopoverConfig {
  return Object.assign(new PopoverConfig(), {
    placement: 'right',
    container: 'body',
    triggers: 'focus',
    delay: 500
  });
}

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-config',
  templateUrl: './config.html',
  providers: [{ provide: PopoverConfig, useFactory: getPopoverConfig }],
  standalone: false
})
export class DemoPopoverConfigComponent {}

Outside click
#

<button type="button" class="btn btn-primary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'"
        [outsideClick]="true">
  Live demo
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-outside-click',
  templateUrl: './outside-click.html',
  standalone: false
})
export class DemoPopoverOutsideClickComponent {}

Custom triggers
#

<div class="row">
  <div class="col-md-2">
    <button type="button" class="btn btn-info"
            [popover]="'I will hide on blur'"
            triggers="mouseenter:mouseleave">
      Hover over me!
    </button>
  </div>
  <div class="col-md-2">
    <button type="button" class="btn btn-info"
            [popover]="'Double click one more time'"
            triggers="dblclick">
      Double click me!
    </button>
  </div>
  <div class="col-md-3">
    <input type="text"
           class="form-control"
           placeholder="Show popover on input change"
           [popover]="'I will hide on blur'"
           triggers="keypress:focusout">
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-triggers-custom',
  templateUrl: './triggers-custom.html',
  standalone: false
})
export class DemoPopoverTriggersCustomComponent {}

Manual triggering
#

This demo shows manipulating popover by show, hide and toggle methods

This text has attached popover

<p>
  <span [popover]="'Hello there! I was triggered manually'"
        triggers="" #pop="bs-popover">
  This text has attached popover
  </span>
</p>

<button type="button" class="btn btn-success" (click)="pop.show()">
  Show
</button>
<button type="button" class="btn btn-warning" (click)="pop.hide()">
  Hide
</button>
<button type="button" class="btn btn-info" (click)="pop.toggle()">
  Toggle
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-triggers-manual',
  templateUrl: './triggers-manual.html',
  standalone: false
})
export class DemoPopoverTriggersManualComponent {}

Trigger by isOpen property
#

You can show/hide popover by switching isOpen property

This text has attached popover

<p>
  <span [popover]="'Hello there! I was triggered by changing isOpen property'"
        triggers=""  [isOpen]="isOpen">
  This text has attached popover
  </span>
</p>
<button type="button" class="btn btn-primary"
        (click)="isOpen = !isOpen">
  Toggle
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-trigger-by-isopen',
  templateUrl: './trigger-by-isopen-property.html',
  standalone: false
})
export class DemoPopoverByIsOpenPropComponent {
  isOpen = false;
}

Component level styling
#

<button type="button" class="btn btn-info"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'">
  I have component level styling
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-styling-local',
  templateUrl: './styling-local.html',
  styles: [
    `
:host .popover {
  background-color: #009688;
  color: #fff;
}
:host .popover>.arrow:after {
  border-top-color: #009688;
}
  `
  ],
  standalone: false
})
export class DemoPopoverStylingLocalComponent {}

<button type="button" class="btn btn-primary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'" containerClass="customClass">
  Custom class demo
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-class',
  templateUrl: './class.html',
  standalone: false
})
export class DemoPopoverClassComponent {}

<ng-template #popTemplate let-message="message">{{ message }}</ng-template>
<button type="button" class="btn btn-primary"
        [popover]="popTemplate" [popoverContext]="context">
  Open popover with custom context
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-context',
  templateUrl: './popover-context.html',
  standalone: false
})
export class DemoPopoverContextComponent {
  context = {
    message: 'Hello there!'
  };
}

Click on the button to see popover delayed for 0,5 second

<button type="button" class="btn btn-primary"
        [popover]="'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'" [delay]="500">
  Popover with 0.5sec delay
</button>

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'demo-popover-delay',
  templateUrl: './delay.html',
  standalone: false
})
export class DemoPopoverDelayComponent {}

Installation

ng add ngx-bootstrap  --component popover

### Standalone component usage
import { PopoverModule } from 'ngx-bootstrap/popover';

@Component({
  standalone: true,
  imports: [PopoverModule,...]
})
export class AppComponent(){}

### Module usage
import { PopoverModule } from 'ngx-bootstrap/popover';

@NgModule({
  imports: [PopoverModule,...]
})
export class AppModule(){}

A lightweight, extensible directive for fancy popover creation.

Selector

Configuration service for the Popover directive. You can inject this service, typically in your root component, and customize the values of its properties in order to provide default values for all the popovers used in the application.

Properties

`adaptivePosition`	Type: `boolean` Default value: `true` sets disable adaptive position
`container`	Type: `string` A selector specifying the element the popover should be appended to.
`delay`	Type: `number` Default value: `0` delay before showing the tooltip
`placement`	Type: `string` Default value: `top` Placement of a popover. Accepts: "top", "bottom", "left", "right", "auto"
`triggers`	Type: `string` Default value: `click` Specifies events that should trigger. Supports a space separated list of event names.

Basic

Placement

Corner placement

Disable adaptive position

Adaptive position with overflow boundary

Dynamic content

Custom content template

Dynamic Html

Append to body

Visibility events

Event:

Popover

Basic #

Placement #

Corner placement #

Disable adaptive position #

Adaptive position with overflow boundary #

Dismiss on next click #

Dynamic content #

Custom content template #

Dynamic Html #

Append to body #

Visibility events #

Configuring defaults #

Outside click #

Custom triggers #

Manual triggering #

Trigger by isOpen property #

Component level styling #

Custom class #

Popover context #

Popover with delay #

Installation

PopoverDirective

PopoverConfig

Properties

Basic

Placement

Corner placement

Disable adaptive position

Adaptive position with overflow boundary

Dismiss on next click

Dynamic content

Custom content template

Dynamic Html

Append to body

Visibility events

Configuring defaults

Outside click

Custom triggers

Manual triggering

Trigger by isOpen property

Component level styling

Custom class

Popover context

Popover with delay