feat(popover,tooltip): Support something akin to 'selector' in BS4 popover

ref: http://v4-alpha.getbootstrap.com/components/popovers/#options

Use case: allow popover to be delegated to 3rd-party components. It could support selectors or (more importantly) element refs.

For instance, I’m using a component from a module and I want to have a popover point to it, but its not positioned exactly where its parent element is, so putting the popover on the parent doesn’t look right. The only way I can get it to work properly is to add ngbPopover directly to the component’s template.

[keljoundi]

Similar real-life example:

I am using Fullcalendar in an application and want to be able to bind popovers to the calendar events to show details at a glance.

I am able to work around the problem and get popovers to work in a dirty way. I defined a single popover element in the HTML and in the TS component I reference the popover via ViewChild and set title and content. To correct the location I set the private _elementRef variable and it seems to work, and just ignore the ts errors with @ts-ignore.

@ViewChild('popover') public popover: NgbPopover;
 ...
 eventMouseEnter(el: HTMLElement, event: EventApi) {
        ...
        this.popover.ngbPopover = event_data['content'];
        this.popover.popoverTitle = event_data['title'];
        // @ts-ignore
        this.popover._elementRef = new ElementRef(el);
        this.popover.open();
   }

This is a quick and dirty workaround and something as simple as exposing the _elementRef or better yet adding a function to change the _elementRef could do the trick. My first thought was to extend the NgbPopover class or add a prototype function but wasn’t successful and have read on other issues that extending features of NG-Bootstrap isn’t really feasible.

[keljoundi]

@cribbstechnologies From my package.json: “@fullcalendar/angular”: “^4.3.1”

I am using pretty standard code for the template:

 <full-calendar #calendar
   ...
 (eventMouseEnter)="eventMouseEnter($event)"
 (eventMouseLeave)="eventMouseLeave($event)"
 (eventClick)="routeToCalendar()"
 (dateClick)="routeToCalendar()"></full-calendar>

 < div [ngbPopover]="popContent" popoverTitle="Popover on top"
      #popover="ngbPopover" triggers="manual" container="body">
 < /div>
 < ng-template #popContent>
 	<div [innerHTML]="popoverContent"></div>
 < /ng-template>

It has been a while since I’ve had to mess with this part of my app so I may be forgetting some details. Let me know if you need anything else