Skip to content

[Bug]: CSS filter property on Tooltip mirrors content outside the Tooltip when withArrow is enabled #36265

@TomSoftwerft

Description

@TomSoftwerft

Component

Tooltip

Package version

9.73.8

React version

19.2.5

Environment

System:
    OS: Linux 6.8 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 34.15 GB / 62.51 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Browsers:
    Chrome: 138.0.7204.92
    Chromium: 148.0.7778.167
    Firefox: 151.0.2
    Firefox Developer Edition: 151.0.2

Current Behavior

Image

When the withArrow prop is enabled on Tooltip, the CSS filter property causes mirrored content to appear outside the Tooltip.

Expected Behavior

The Tooltip content should not be mirrored.

Reproduction

https://stackblitz.com/edit/u8kjpbsj?file=src%2Fexample.tsx

Steps to reproduce

  1. Go to stackblitz
  2. hover over the after-top example (sometimes it also is visible for the after example)

Are you reporting an Accessibility issue?

no

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions