Info-Icon

The nxt-info-icon acts as a button that can open a popover or modal to provide additional information. The mode is set to auto by default and will show a popover in case the lenght of the text content is less or equal 300 characters. In case the length exceeds the maximal number of characters the content is shown within a modal.

Basic

test

<nxt-info-icon>test</nxt-info-icon>

With Modal

In case the mode attribute is set to auto (the default). The content lenght decides whether the content is shown within a modal or a popover. Within this example, the mode is set to modal, therefore the content is shown within a popover.

Shown in a modal

<nxt-info-icon mode="modal">Shown in a modal</nxt-info-icon>

Within this example, the length of the content exceeds 300 characters, so the content is shown within a modal.

Long text is shown in a modal. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<nxt-info-icon>
  Long text is shown in a modal. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
  has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
  scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</nxt-info-icon>

With Popover

In case the mode attribute is set to auto (the default). The content lenght decides whether the content is shown within a modal or a popover. Within this example, the mode is set to popover, therefore the content is shown within a popover.

Shown in a popover

<nxt-info-icon mode="popover">Shown in a popover</nxt-info-icon>

Within this example, the length of the content is less than 300 characters, so the content is shown within a popover.

Short text is shown in a popover. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<nxt-info-icon>
  Short text is shown in a popover. Lorem Ipsum is simply dummy text of the printing and typesetting
  industry.</nxt-info-icon
>

import '@nxt/ndbx-components/info-icon';

NxtInfoIcon

Tag: nxt-info-icon

Properties

Property	Attribute	Type	Default	Description
`ariaLabelCloseIcon`	`ariaLabelCloseIcon`	`string`	`'Close Popover'`	Accessible close icon label.
`maxPopoverContentLength`	`maxPopoverContentLength`	`number`	`300`	The threshold for the content length (number of characters), for which a popover will be opened instead of a modal. This is only relevant if mode is set to `auto`
`popoverDirection`	`popoverDirection`	`string`	`'right'`	The direction of the popover. The options are `left`, 'top', 'right', 'bottom' and `auto`.
`mode`	`mode`	`string`
`show`	`show`	`boolean`