Popover

Popover Trigger Example

It is possible to open the popover by hover, click or manually. To adjust the trigger type accordingly, set the trigger attribute to click, hover or manual.

The popover triggered by click (by default) will stay open until the user explicitly closes the the popover.

Trigger Trigger by click Trigger by click

<nxt-popover>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  Trigger by click
</nxt-popover>
Trigger by click

If set to manual, you have to open and close it manually. Use the public interface (open/close)

Trigger Trigger manual Trigger manual

<nxt-popover trigger="manual">
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  Trigger manual
</nxt-popover>
Trigger manual

<script>
  const manualPopover = document.querySelector("nxt-popover[trigger='manual']");
  const manualPopoverTrigger = document.querySelector("nxt-popover[trigger='manual'] > nxt-button");

  const toggleFunction = function () {
    manualPopover.show = !manualPopover.show;
  };

  manualPopoverTrigger.addEventListener('click', toggleFunction);
</script>

The popover triggered by hover will close immediately after the mouse exits the trigger. To learn more about the hover trigger please check the Hover triggered popover section.

Trigger Trigger hover Trigger hover

<nxt-popover trigger="hover">
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  Trigger hover
</nxt-popover>
Trigger hover

Closing on document click

You can disable the default feature that a popover is getting closed by clicking outside of it by using the attribute stayopen as shown in the example below. The property has no effect if you apply it on a trigger of type hover.

Trigger Closable by clicking outside Closable by clicking outside

<nxt-popover>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  Closable by clicking outside
</nxt-popover>
Closable by clicking outside

Stayopen Not closable by clicking outside Not closable by clicking outside

<nxt-popover stayopen>
  <nxt-button slot="trigger" appearance="small">Stayopen</nxt-button>
  Not closable by clicking outside
</nxt-popover>
Not closable by clicking outside

Trigger Closable by moving out because the trigger is set to hover (stayopen has no effect) Closable by moving out because the trigger is set to hover

<nxt-popover trigger="hover" stayopen>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  Closable by moving out because the trigger is set to hover (stayopen has no effect)
</nxt-popover>
Closable by moving out because the trigger is set to hover

No close icon

You can disable the close icon that is shown within the popover while using the default trigger type click. By using the attribute noCloseIcon, the icon is not available. In case you use this attribute in combination with the attributes stayopen, and reposition the popover will stay open and you have no possibility to close it, in this case you need to provide a programmatical other solution to close the popover.

Trigger Shows no close icon (click outside to close the popover) Shows no close icon (click outside to close the popover)

<nxt-popover noCloseIcon>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  Shows no close icon (click outside to close the popover)
</nxt-popover>
Shows no close icon (click outside to close the popover)

Trigger No possibility to close this popover
(wait 5 seconds) Closed after 5 seconds

<nxt-popover noCloseIcon stayopen reposition>
  <nxt-button slot="trigger" appearance="small">Trigger</nxt-button>
  No possibility to close this popover <br />(wait 5 seconds)
</nxt-popover>
Closed after 5 seconds

<script>
  const noCloseIcon = document.querySelector('nxt-popover[noCloseIcon][stayopen]');

  const startTimer = function () {
    setTimeout(() => {
      noCloseIcon.show = false;
    }, 5000);
  };

  noCloseIcon.addEventListener('click', startTimer);
</script>

Positioning

It is possible to position the popover top/right/bottom/left to the trigger by setting the direction attribute to top/right/bottom/left or auto. By using auto one of the other directions is automatically getting chosen by determining in which direction the popup has the most space to show up. By default the direction is set to right.

Top Popup top

Right Popup right

Bottom Popup bottom

Left Popup left

<nxt-popover direction="top">
  <nxt-button slot="trigger" appearance="small">Top</nxt-button>
  Popup top
</nxt-popover>

<nxt-popover direction="right">
  <nxt-button slot="trigger" appearance="small">Right</nxt-button>
  Popup right
</nxt-popover>

<nxt-popover direction="bottom">
  <nxt-button slot="trigger" appearance="small">Bottom</nxt-button>
  Popup bottom
</nxt-popover>

<nxt-popover direction="left">
  <nxt-button slot="trigger" appearance="small">Left</nxt-button>
  Popup left
</nxt-popover>

Custom content

It is possible to use every kind of html content within the popover.

Content

<nxt-popover>
  <nxt-button slot="trigger" appearance="small">Content</nxt-button>
  <img width="116" height="30" src="/assets/images/allianz.svg" alt="allianz logo" />
</nxt-popover>

Modal popover

It is possible to configure the popover to be modal - just set nxPopoverTrigger=click and nxPopoverModal=true. Now the popover can be closed via the close icon as well as with the ESC-Key.

Content

<nxt-popover modal>
  <nxt-button slot="trigger" appearance="small">Content</nxt-button>
  <img width="116" height="30" src="/assets/images/allianz.svg" alt="allianz logo" />
</nxt-popover>

Scroll strategy

The popover is getting closed while scrolling. This behaviour can be changed to a repositioning of the popover by using the attribute reposition.

Content

<nxt-popover reposition>
  <nxt-button slot="trigger" appearance="small">Content</nxt-button>
  <img width="116" height="30" src="/assets/images/allianz.svg" alt="allianz logo" />
</nxt-popover>

import '@nxt/ndbx-components/popover';

NxtPopover

Tag: nxt-popover

Properties

Property	Attribute	Type	Default	Description
`ariaLabelCloseIcon`	`ariaLabelCloseIcon`	`string`	`'Close Popover'`	Accessible close icon label.
`direction`	`direction`	`PopoverDirection`	`'right'`	Sets the desired direction to open the popover. E.g., top, right, bottom, left or auto
`modal`	`modal`	`boolean`	`false`	Whether the popover opens in modal state.
`noCloseIcon`	`noCloseIcon`	`boolean`	`false`	Whether to show a close button. By default a close icon is only shown for trigger type click.
`popoverInitialVisible`	`popoverInitialVisible`	`boolean`	`false`	Whether the popover will be opened automatically.
`reposition`	`reposition`	`boolean`	`false`	Sets the scroll strategy to reposition on scroll. By default the popover is closed and not repositioned while scrolling.
`stayopen`	`stayopen`	`boolean`	`false`	Whether the popover should be closed on click outside of the popover in the trigger modes 'manual' and 'click'.
`trigger`	`trigger`	`PopoverTriggerType`	`'click'`	Sets the way to trigger the popover. Options are hover, click, manual. `hover`: the popover opens on mouseenter and closes on mouseout. `click`: the popover opens on click and closes on a click of the close icon or pressing ESC key. `manual`: the popover opens only when programmatically requested.
`show`	`show`	`boolean`

Type Aliases

PopoverDirection

'undefined' | 'undefined'

PopoverHorizontalDirection

'left' | 'right' | 'auto'

PopoverTriggerScrollStrategy

'close' | 'reposition'

PopoverTriggerType

'click' | 'hover' | 'manual'

PopoverVerticalDirection

'top' | 'bottom' | 'auto'