FeaturePopover
FeaturePopover
This is a wrap component, which is completely inherited from <Popper/>
.
jsx
import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover />;
PopperProps
& & & & {...}Name | Type | Description |
---|---|---|
strategy | Popper can have different positioning options | |
modifiers | Modifiers for popper.js | |
placement | The 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 |
timeout | number | [number, number] | Timer to show and hide the popper |
visible | boolean | Popper visibility value |
defaultVisible | boolean | Default popper visibility |
onVisibleChange | (visible: boolean, e: ) => boolean | void | Function called when visibility changes |
offset | Partial<> | number | [number, number] | PopperJS modifier settings for popper indent |
preventOverflow | Partial<> | PopperJS modifier settings for finding borders |
arrow | Partial<> | PopperJS modifier settings responsible for the arrow |
flip | Partial<> | PopperJS modifier settings responsible for turning the popper when there is not enough space |
computeStyles | Partial<> | PopperJS modifier settings for applying styles |
eventListeners | Partial<> | PopperJS modifier settings responsible for subscribing to global events |
onFirstUpdate | ["onFirstUpdate"] | |
disabled | boolean | Flag for disable Popover (if true, it will close Popper and it will not respond to handlers) |
disableEnforceFocus | boolean | Disabled focus trap, autofocus and focus return |
focusLoop | boolean | |
explicitTriggerSet | boolean | If enabled, you will need to use setTrigger function from children rendering function to set popper trigger. |
cursorAnchoring | boolean | If set, popper will be placed near the place mouse cursor entered the trigger |
FeaturePopover.Trigger
This is the element, to which <FeaturePopover.Popper/>
will be attached. It's fully inherited from <Popper.Trigger/>
.
jsx
import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover.Trigger />;
PopperTriggerProps
& {...}Name | Type | Description |
---|---|---|
disableEnforceFocus | boolean | Disabled focus trap, autofocus and focus return |
FeaturePopover.Popper
This is the element, to which <FeaturePopover.Trigger/>
will be attached. It's fully inherited from <Popper.Popper/>
.
jsx
import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover.Popper />;
FeaturePopoverPopperProps
& {...}Name | Type | Description |
---|---|---|
closeIcon | boolean | The property responsible for the visibility of the closing icon |
duration | number | Animation display duration in `ms` |
locale | string |
FeaturePopover.Spot
This blinking circle is inherited from <Box>
.
jsx
import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover.Spot />;