We are using BaseControl and a FormToggle here instead of ToggleControl for 2 reasons:

1. Hovering over ToggleControl does not display a tooltip due to the disabled property. We can skirt this by adding a div wrapper but this throws off our product page styling slightly by wrapping some of the Gutenberg classes.
2. Using ToggleControl does not allow us to wrap just the toggle which appears to be the case from the designs cc @jarekmorawski

I'm not overly opinionated on this, so if want to revert to ToggleControl and create another overlay to circumvent the GB disabled issues, I'll be happy to try that out.

Thanks for the ping, Josh. Is the problem just with the element to wrap or the whole component? If the former, it's okay to treat the whole element (toggle + label) as disabled and show the tooltip on hover.

@jarekmorawski there are two issues, but the only one that is potentially a concern on the design side is the tooltip not being centered over the toggle itself, but centered over the whole element (toggle + label). The way it's setup right now, the tooltip displays on hovering the toggle only and is centered over that toggle.

If centering the tooltip on over the whole element and displaying it also on label hover is acceptable, this opens up the alternative to the other solution (dev note: not necessarily the best solution based on the above criteria).

If centering the tooltip on over the whole element and displaying it also on label hover is acceptable, this opens up the alternative to the other solution

Given that the user cannot interact with the toggle directly on the page, for accessibility reasons, I'd vote for showing the tooltip for the whole element. What do you think would be the best solution?

If centering the tooltip over the entire element is not an issue in terms of design, that's an option.

One alternative might be to add our version of the tooltip, a help icon that's clickable (used in other areas of the new product experience) if we want more control over what's rendered.

I think both are fine solutions; let me know if you have a preference towards either.

If centering the tooltip over the entire element is not an issue in terms of design, that's an option.

Let's go with this option. It's simple enough and we're not building unnecessary dependencies or forking components. 👍

This does cause the tooltip to look a bit odd as the checkbox and label take up the full width of the field input, making the tooltip appear further on the right:

Would it make sense for the checkbox and label not to be full width, so the tooltip centers correctly over it?

It does look odd. 🤔 Yeah, let's have the tooltip center right over the checkbox and label.