Bootstrap Popover using Aurelia customAttribute that fetches data from Firebase and inserts it into the popover content area using a dynamic Compose view.

organizations-menu.html

<template>

  <div class="dropdown-item ${items.isLoading ? '' : 'hide'}">
    <p class="mb5"><i class="fa fa-refresh mr5"></i> Loading data...</p>;
  </div>
  <div class="dropdown-item" repeat.for="item of items">
    <p class="mb5">
      <span class="mr10">${item.__firebaseKey__}</span>
    </p>
  </div>

</template>

popover-menu.html

<template>
  
  <form id="popover-menu-form">
    <div class="form-group">
      <label class="sr-only" for="organization-name">Organizations</label>
      <input autocomplete="off" id="organization-name" class="form-control" placeholder="Organization name" type="text" bootstrap-popover="query: organizations" data-toggle="popover" title="Organizations" data-trigger="focus" />
    </div>
    <div class="form-group">
      <label class="sr-only" for="organization-name">Users</label>
      <input autocomplete="off" id="users-name" class="form-control" placeholder="Users name" type="text" bootstrap-popover="query: users" data-toggle="popover" title="Users" data-trigger="focus" />
    </div>
  </form>
  
</template>

popover-menu.ts

import {customAttribute, TemplatingEngine, autoinject, bindable} from 'aurelia-framework';
import {ReactiveCollection} from 'aurelia-firebase'; // fork from github:dashofcode/aurelia-firebase@firebase-3
import $ from 'bootstrap'; // using bootstrap-v4-alpha

export class PopoverMenu {

}

@customAttribute('bootstrap-popover')
@autoinject
export class BootstrapPopover {

    @bindable query: string;
    viewModelInstance: any;
    
    constructor(private element: Element, private templatingEngine: TemplatingEngine){
        this.templatingEngine = templatingEngine;
    }

    bind() {
        let _this = this;
        _this.viewModelInstance  = new ReactiveCollection(_this.query, true);

        jQuery(this.element).popover({
            template: '<div class="popover popover-menu" role="tooltip"><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
            offset: '-10px 35px',
            html: true,
            content: () => {
                return '<compose view="_this.query+'-menu.html" model.bind="items"></compose>';
            }
        }).on('shown.bs.popover', () => {
        
            // Reference and target the popover added to the DOM
            var popoverID = jQuery(_this.element).attr('aria-describedby');
            let popover = document.querySelector('#' + popoverID + '>.popover-content');

            if (popover) {
                if (!popover.querySelectorAll('.au-target').length) {
                    _this.templatingEngine.enhance({element: popover, bindingContext: _this.viewModelInstance});
                }
            }
            
        });
    }

    unbind() {
        jQuery(this.element).popover('dispose');
    }

}

users-menu.html

<template>
  
  <div class="dropdown-item ${items.isLoading ? '' : 'hide'}">
    <p class="mb5"><i class="fa fa-refresh mr5"></i> Loading data...</p>;
  </div>
  <div class="dropdown-item" repeat.for="item of items">
    <p class="mb5">
      <span class="mr10">${item.first_name} ${item.last_name}</span>
      <span class="small text-muted mb5">${item.ssn}</span>
    </p>
  </div>

</template>