Skip to content

FeaturePopover

FeaturePopover

This is a wrap component, which is completely inherited from <Popper/>.

jsx
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover />;
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover />;

PopperProps

& & & Omit<"placement"> & {...}
NameTypeDescription
strategyPopper can have different positioning options
modifiersModifiers for popper.js
placementThe position of the popper relative to the trigger that called it. 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'
interaction"click" | "hover" | "focus" | "none" | Interaction with a trigger to show and hide the popper
timeoutnumber | [number, number]Timer to show and hide the popper
visiblebooleanPopper visibility value
defaultVisiblebooleanDefault popper visibility
onVisibleChange(visible: boolean, e: ) => boolean | voidFunction called when visibility changes
offsetPartial<> | number | [number, number]PopperJS modifier settings for popper indent
preventOverflowPartial<>PopperJS modifier settings for finding borders
arrowPartial<>PopperJS modifier settings responsible for the arrow
flipPartial<>PopperJS modifier settings responsible for turning the popper when there is not enough space
computeStylesPartial<>PopperJS modifier settings for applying styles
eventListenersPartial<>PopperJS modifier settings responsible for subscribing to global events
onFirstUpdate["onFirstUpdate"]
disableEnforceFocusbooleanDisabled focus trap, autofocus and focus return

FeaturePopover.Trigger

This is the element, to which <FeaturePopover.Popper/> will be attached. It is fully inherited from <Popper.Trigger/>.

jsx
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover.Trigger />;
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover.Trigger />;

PopperTriggerProps

& {...}

FeaturePopover.Popper

This is the element, to which <FeaturePopover.Trigger/> will be attached. It is fully inherited from <Popper.Popper/>.

jsx
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover.Popper />;
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover.Popper />;

FeaturePopoverPopperProps

& {...}
NameTypeDescription
closeIconbooleanThe property responsible for the visibility of the closing icon
durationnumberAnimation display duration in `ms`
localestring

FeaturePopover.Spot

This blinking circle is inherited from <Box>.

jsx
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover.Spot />;
import FeaturePopover from '@semcore/ui/feature-popover';
<FeaturePopover.Spot />;

Released under the MIT License.

Released under the MIT License.