How to add a tooltip to Switch

[15MariamS]

What's the best way to add a switch with a tooltip for the label?

The switch component's label only takes in a string, vs an element to add in a label. I wonder if wrapping the switch with InfoLabel will cause accessibility issues since the switch is an interactive element. That is the approach I've taken now.

Any suggestions?

I was thinking perhaps customizing with slots, but not entire sure how to do this.

[pradeept95]

Hi @15MariamS
You can use Tooltip component to achieve this. Following is an example that might help you.

import { Label, Switch, Tooltip } from "@fluentui/react-components";

function App() {

  return (
    <>
      <Tooltip content={"This is tooltip content."} relationship={"label"}>
        <Switch label={<Label>Tooltip on switch control</Label>} />
      </Tooltip>
      <Switch label={<>
        <Tooltip content={"This is tooltip content"} relationship={"label"}>
          <Label>Tooltip on label</Label>
        </Tooltip></>} />
    </>
  )
}