Skip to content

PF4: Popover and Tooltip need an extra CSS import #1189

@msglifeIberia

Description

@msglifeIberia

I followed the documentation and imported the @patternfly/react-core/dist/styles/base.css file in my app.
Later I used a <Popover> in my app and noticed it didn't behave like it does in your storybook.
The main issues were the positioning that was slightly off and the lack of the fading effect when showing the popover.
Inspecting the DOM and the CSS imports I found out I was missing this CSS file import:
tippy.js/dist/tippy.css

I wasn't able to find any reference to this import in your documentation.
This import should be done within the base.css or the documentation should have a note saying that this import is needed if one wants to use the <Popover> or the <Tooltip> components (and maybe other components that use tippy.js as well?).

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions