Developer FeaturePopover
This is a wrap component, which is completely inherited from <Popper/>.
jsx
import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover />;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 is fully inherited from <Popper.Trigger/>.
jsx
import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover.Trigger />;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 is fully inherited from <Popper.Popper/>.
jsx
import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover.Popper />;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 />;import FeaturePopover from 'intergalactic/feature-popover';
<FeaturePopover.Spot />;