Popovers

Angular Bootstrap 5 Popovers component

Documentation and examples for adding popovers, like those found in iOS, to any element on your site.

Note: Read the API tab to find all available options and advanced customization

Basic example

Popovers are overlays that open on demand and are mainly used on elements to display more content on floating cards, triggered by clicking or hovering.

        
            
            <button
              type="button"
              class="btn btn-lg btn-danger"
              mdbPopover="And here's some amazing content. It's very engaging. Right?"
              mdbPopoverTitle="Popover title"
            >
              Click to toggle popover
            </button>
          
        
    

Overview

Things to know when using the popovers:

• Popovers are opt-in for performance reasons, so you must initialize them yourself.
• Zero-length mdbPopoverTitle and mdbPopover values will never show a popover.
• Triggering popovers on hidden elements will not work.
• Popovers for .disabled or disabled elements must be triggered on a wrapper element.
• Popovers must be hidden before their corresponding elements have been removed from the DOM.
• Popovers can be triggered thanks to an element inside a shadow DOM.

Four directions

Four options are available: top, right, bottom, and left aligned.

        
            
            <button
              type="button"
              class="btn btn-secondary me-2"
              placement="top"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on top
            </button>
            <button
              type="button"
              class="btn btn-secondary me-2"
              placement="right"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on right
            </button>
            <button
              type="button"
              class="btn btn-secondary me-2"
              placement="bottom"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on bottom
            </button>
            <button
              type="button"
              class="btn btn-secondary"
              placement="left"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
            >
              Popover on left
            </button>
          
        
    

Dismiss on next click

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

Specific markup required for dismiss-on-next-click:
For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.

        
            
            <a
              tabindex="0"
              class="btn btn-lg btn-danger"
              role="button"
              trigger="focus"
              mdbPopoverTitle="Dismissible popover"
              mdbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
              >Dismissible popover</a
            >
          
        
    

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <div> or <span> and override the pointer-events on the disabled element.

For disabled popover triggers, you may also prefer data-mdb-trigger="hover" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

        
            
            <span class="d-inline-block" mdbPopover="Disabled popover">
              <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>
                Disabled button
              </button>
            </span>
          
        
    

Custom template

Use ng-template reference as a value for [mdbPopover] input to display custom template. You can inlcude context data with [mdbPopoverData] input.

        
            
          <button
          type="button"
          class="btn btn-lg btn-danger"
          [mdbPopover]="template"
          mdbPopoverTitle="Popover custom template"
          [mdbPopoverData]="{ person: { name: 'John', surname: 'Doe' } }"
        >
          Click to toggle popover
        </button>
        <ng-template #template let-person="person">Current user: {{ person.name }} {{ person.surname }}</ng-template>
          
        
    

Related resources