Popover
Anchor element
Avoid using the useRef hook to declare the anchor element reference.
The reference will only be set during the first render. Therefore, as useRef does not force a new rendering, eventually the value of the anchorEl property can be null.
The Popover must always be positioned in line with the anchor element, which can be any DOM reference, such as texts, links, buttons, among others.
It is essential that the anchor is defined and passed to Popover via the anchorEl property, for the component to work correctly.
State control and interactions
The Popover component is controlled, that is, a state must be defined to handle its opening and closing interactions.
Examples:
Opening with click
Opening with hover
In addition to the examples above, it is possible to use other events to control the state of Popover.
Closing the Popover
The closing definition of the button must be present through the dismissible property.
The onClose callback is executed when the user clicks outside the Popover area, presses the ESC key or clicks the close button (when it exists).
Through the reason parameter, it is possible to define specific rules for closing.
Examples:
Close only when close button is clicked
Close only when internal action is clicked
Content
Popover works as a template component, that is, in addition to offering styles for it, it also defines spacing between the components passed through the children property.
Use the Popover.Title subcomponent to indicate the Popover title.
It is possible to have more basic content, with just a simple title and description.
Or also have fully customized contents inside a Popover.
Highlight Popover
The Popover can be used in its standard format, with a white background, or in the highlighted format with a purple background, by using the prop kind with the value Popover.kinds.highlight, depending on the needs of each use case.
Positioning
The Popover adjusts its placement automatically if it doesn't have enough screen space to display the content at the defined position.
If you need to specify an initial positioning, use the position property. See the Component API for more details.
Internationalization
Through the closeLabelText property it is possible to customize the internal text of the close button label. This text is not displayed on the screen, but it is important for accessibility.
By default, the text is in English, but to help with this process there are constants available in English, Portuguese and Spanish. For more details visit our Component API tab.
Example of using the constant for Portuguese: