[Bug]: AccordionHeader button overlapped with InfoLabel Tooltip

[nviolero]

Component

Accordion

Package version

9.63.0

React version

17.0.1

Environment

OS: Windows 11
Browser: Microsoft Edge 125.0.2535.67

Current Behavior

The tooltip of a InfoLabel that is placed in an AccordionPanel, is shown behind the next AccordionHeader button.

Expected Behavior

The tooltip should be in front of any other component.

Reproduction

https://stackblitz.com/edit/wsmcjige

Steps to reproduce

1. Add a Accordion.
2. Add a InfoLabel insithe the AccordionPanel.
3. Click the info to see how the Tooltip is render behind the accordion header.

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

Product system based on SharePoint Online, Spfx, Fluent UI9

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.

[mainframev]

@nviolero

Hi 👋🏻

Technically it's not Tooltip, but Popover. This is happening because of Portals. InfoButton in InfoLabel has inline: true by default, so it renders Popover in Portal in DOM order. In your case you need the opposite, you can make it work as expected by setting inline: false to Popover via slot:

import * as React from 'react';
import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  InfoLabel,
  Link,
} from '@fluentui/react-components';

export const Default = () => (
  <Accordion>
    <AccordionItem value="1">
      <AccordionHeader>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <InfoLabel
          infoButton={{
            popover: {
              inline: false,
            },
          }}
          info={
            <>
              This is example information for an InfoLabel.{' '}
              <Link href="https://react.fluentui.dev">Learn more</Link>
            </>
          }
        >
          Example label
        </InfoLabel>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
);

[microsoft-github-policy-service]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

[microsoft-github-policy-service]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!