This is a colletion of samples for ng2-pop-over component. Each working example has a code snippet below it to
show how it was done.
For npm package and documentation go here
A basic usage of trigger
hey there
{{dynamicMessage | async}}
hover for a pop over left and below
<pop-over
#popOver1 [my]="'top left'" [at]="'bottom right'"
[anchor-to]="true" [x-offset]="5" [y-offset]="5">
<div class="my-pop-over">
<div>hey there</div>
<div>some content</div>
</div>
</pop-over>
<div class="inline-trigger" [pop-over-trigger]="popOver1"
[show-on]="showOn" [hide-on]="'mouseleave'">hover for a pop over left and below
</div>
Same as above just on top
hey there
{{dynamicMessage | async}}
hover for a pop over top and above
#popOver2 [my]="'bottom left'" [at]="'top right'"
Now trigger it programmatically and position in overlap
hey there
{{dynamicMessage | async}}
click to show an overlapping pop over
<pop-over
#popOver3 [my]="'left'" [at]="'center'"
[anchor-to]="true" [x-offset]="5" [y-offset]="5">
<div class="my-pop-over">
<div>hey there</div>
<div>content ...</div>
</div>
</pop-over>
<div class="inline-trigger" (click)="popOver3.show($event)">click to show an overlapping pop over
</div>
Attach the pop over to another component
click to see the pop over on the element on the right
watch me carefully, I am the pop over target
<pop-over
#popOver4 [my]="'bottom right'" [at]="'center'"
[anchor-to]="popOver4Target" [x-offset]="5" [y-offset]="5">
<div class="my-pop-over">
<div>How did I get here?</div>
</div>
</pop-over>
<div style="display: flex; flex-direction: row;">
<div class="inline-trigger" (click)="popOver4.show($event)">
click to see the pop over on the element on the right
</div>
<div style="flex: 1 1 auto;"></div>
<div #popOver4Target class="inline-trigger">watch me carefully, I am the pop over target</div>
</div>
Use your own custom component
hover for a custom component pop over right and above
<pop-over
#popOver5 [my]="'bottom left'" [at]="'top right'"
[anchor-to]="true" [x-offset]="5" [y-offset]="5">
<my-message [title]="'Before you go'" [content]="'Did you lock all the doors?'"></my-message>
</pop-over>
<div class="inline-trigger" [pop-over-trigger]="popOver5"
[show-on]="showOn" [hide-on]="'mouseleave'">
hover for a custom component pop over right and above
</div>
Click to toggle
Now you got me triggered. Click again to hide me.
click me to toggle a the pop over (visible: {{popOver6.visible$ | async}})
<pop-over
#popOver6 [my]="'bottom left'" [at]="'top right'"
[anchor-to]="true" [x-offset]="5" [y-offset]="5">
<div class="my-pop-over">Now you got me triggered. Click again to hide me.</div>
</pop-over>
<div class="inline-trigger" (click)="popOver6.toggle($event)">
click me to toggle a the pop over (visible: {{popOver6.visible$ | async}})
</div>