The Popover component allows us to show more elements inside a floating box.
$ yarn add @nimbus-ds/popover
$ npm install @nimbus-ds/popover
The component consists of a floating box with indicative arrows and optional paddings.
We use this component when we need to show additional components to provide more information or context within a visualization without using visible space.
This information should be secondary and non-essential, as it will remain hidden until the user interacts with the popover.
We can also use it when we need to provide a list of actions for a certain component and we don't have space to include them in it.
The use of arrows is recommended to make a reference between the Popover and the component that displays it, and should be used when this link is not clear at first glance.
We can configure the padding according to the component chosen to be inside the Popover, for example if the inserted element already has padding we can deactivate this functionality.
- View list of products within an order
- View lists of complementary actions
- Display content related to new features
- Tooltip - Can be used to give the user quick tips related to some element on the screen.
View docs here.