NcPopover

Props

Prop name	Description	Type	Values	Default
popoverBaseClass		string	-	''
focusTrap	Enable popover focus trap	boolean	-	true

Events

Event name	Properties	Description
after-show
after-hide		Triggered after the tooltip was visually hidden.

Slots

Name	Description	Bindings
trigger
default

General description

This component is just a wrapper for the floating-vue plugin by Akryum, please refer to this documentation for customization: https://github.com/Akryum/floating-vue

This components has two slots:

'trigger' which can be any html element and it will trigger the popover this slot is optional since you can toggle the popover also by updating the open prop on this component;
a default slot that is for the content of the popover.

Examples

With a `<button>` as a trigger:

vue

<template>
	<NcPopover>
		<template #trigger>
			<NcButton> I am the trigger </NcButton>
		</template>
		<template>
			<form tabindex="0" @submit.prevent>
				<h2>this is some content</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. </br>
					Vestibulum eget placerat velit.
				</p>
				<label>
					Label element
					<input type="text" placehold="input element" />
				</label>
			</form>
		</template>
	</NcPopover>
</template>

Without focus trap:

The focus-trap emits an error when used in a non-focusable element tree.

The prop :focus-trap="false" help to prevent it when the default behavior is not relevant.

vue

<template>
  <NcPopover :focus-trap="false">
    <template #trigger>
      <NcButton> Click me! </NcButton>
    </template>
    <template>
      Hi! 🚀
    </template>
  </NcPopover>
</template>

NcPopover #

Props #

Events #

Slots #

General description #

Examples #

With a <button> as a trigger: #

Without focus trap: #