It is exactly the same code as mentioned in the examples.
Example A:
<button class="lui-button popover-trigger">Open popover (light)</button>
<div class="popover-content" style="display: none;">
<div class="lui-popover" style="width: 400px;">
<div class="lui-popover__header">
<div class="lui-popover__title">Popover title</div>
</div>
<div class="lui-popover__body">
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
<div class="lui-popover__footer">
<button class="lui-button lui-popover__button">Cancel</button>
<button class="lui-button lui-popover__button close-button">OK</button>
</div>
</div>
</div>
Example B:
<div>
<div>
<button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate">Open popover (trigger)</button>
</div>
<div>
<button class="lui-button" lui-popover-trigger x-dock="right" x-template="$ctrl.popoverTemplate" x-variant="inverse">Open popover (trigger, inverse)</button>
</div>
<div>
<button class="lui-button" ng-click="$ctrl.openPopover($event)">Open popover (service)</button>
</div>
<div>
<button class="lui-button" ng-click="$ctrl.openPopover($event, 'inverse')">Open popover (service, inverse)</button>
</div>
<div>
<button class="lui-button" ng-click="$ctrl.openToPosition($event)">Open popover (service, position to coordinate)</button>
</div>
<div>
<button class="lui-button" ng-click="$ctrl.openCustom($event)">Open popover (service, custom positioning)</button>
</div>
</div>
