Popover

<!-- app.component.html -->
<div (click)="p.toggle()" #p="popover"
    [a2Popover]="{ type: componentInsidePopoverComponent,
      provides: {provide: 42, useValue: 'answer'}, bs: {placement: 'top'} }">
    Show popover with component inside.
    Click to toggle.
</div>

<!-- or -->

<div (mouseout)="p.destroy()" (mouseenter)="p.show()"
     #p="popover"
     [a2Popover]="{ type: componentInsidePopoverComponent,
       provides: {provide: 42, useValue: 'answer'}, bs: {placement: 'top'} }">
    Show popover with component inside.
    (More like a tooltip, on hover.)
</div>

<a (click)="p.toggle()">Toggle Popover</a>
<a (click)="p.show()">Show Popover</a>
<a (click)="p.destroy()">Hide Popover</a>

@ng.Component({
    selector   : "a2ui-app"
})
class AppComponent {
    componentInsidePopoverComponent: any = ComponentInsidePopoverComponent;
}

<!-- component-inside-popover.component.html -->
<div> My Content Inside Popover </div>
<div> val: {{val}} </div>

@ng.Component({
    selector: "component-inside-popover.component",
    templateUrl: "..."
})
export class ComponentInsidePopoverComponent {
    constructor (@Inject(42) public val: any) {}
}

options: {type?: ConcreteType<any>, provides?: Array<any>, bs?: any}