Popover

The bsPopover structural directive on an <ng-template> inside an element turns that element into a popover trigger: a click (or Enter / Space) toggles a non-modal dialog beside it, rendered at the end of <body> so no overflow: hidden ancestor clips it. The directive's value is the side — top, bottom, start or end — and it flips when there is no room. bsPopoverTitle is the heading that names the dialog; the template is its body. Escape (focus returns to the trigger), a click outside or tabbing out closes it. The demo below shows all four positions.

Basic usage

Just to demonstrate that nothing is being cut-off, we're having position:relative;overflow:hidden on the containers.

  
    
      
        <button [color]="colors.primary">
        
    
      
          Click me
        
    
      
          <ng-container *bsPopover="'top'; title: 'Popover title'">
        
    
      
            Place any content here — text, links, embedded components.
        
    
      
          </ng-container>
        
    
      
        </button>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { Color } from '@mintplayer/ng-bootstrap';
        
    
      
        import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
        
    
      
        import { BsPopoverDirective } from '@mintplayer/ng-bootstrap/popover';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-popover-demo',
        
    
      
          templateUrl: './my-popover-demo.component.html',
        
    
      
          imports: [BsPopoverDirective, BsButtonTypeDirective],
        
    
      
        })
        
    
      
        export class MyPopoverDemoComponent {
        
    
      
          protected readonly colors = Color;
        
    
      
        }