[docs] Document Tooltip breaking changes (#15403)

* Add Tooltip breaking changes

* Update docs/src/pages/guides/migration-v3/migration-v3.md

Co-Authored-By: joshwooding <[email protected]>

* Update docs/src/pages/guides/migration-v3/migration-v3.md

Co-Authored-By: joshwooding <[email protected]>

* Update CHANGELOG.md

Co-Authored-By: joshwooding <[email protected]>

* Remove space

* Update Modal v3 migration guide

Author: joshwooding

CHANGELOG.md

@@ -54,6 +54,22 @@ We hope 2-3 weeks of beta will be enough. We plan on releasing v4 stable in May.
   - [DialogActions] Rename the `action` CSS class `spacing`.
   - [ExpansionPanelActions] Rename the `action` CSS class `spacing`.
 
+- [Tooltip] Convert to function component (#15291) @joshwooding
+  The child of the `Tooltip` needs to be able to hold a ref
+
+  ```diff
+  class Component extends React.Component {
+    render() {
+      return <div />
+    }
+  }
+  -const MyComponent = props => <div {...props} />
+  +const MyComponent = React.forwardRef((props, ref) => <div ref={ref} {...props} />);
+  <Tooltip><Component /></Tooltip>
+  <Tooltip><MyComponent /></Tooltip>
+  <Tooltip><div /></Tooltip>
+  ```
+
 #### Changes
 
 - [ScrollbarSize] Convert to function component (#15233) @joshwooding

docs/src/pages/guides/migration-v3/migration-v3.md

@@ -334,9 +334,26 @@ You should be able to move the custom styles to the root class key.
 
 ### Modal
 
-- [Modal] Ignore event.defaultPrevented (#14991) @oliviertassinari
+- [Modal] event.defaultPrevented is now ignored.
 
   The new logic closes the Modal even if `event.preventDefault()` is called on the key down escape event.
   `event.preventDefault()` is meant to stop default behaviors like clicking a checkbox to check it, hitting a button to submit a form, and hitting left arrow to move the cursor in a text input etc.
   Only special HTML elements have these default behaviors.
   People should use `event.stopPropagation()` if they don't want to trigger a `onClose` event on the modal.
+
+### Tooltip
+
+- [Tooltip] The child needs to be able to hold a ref.
+  
+  ```diff
+  class Component extends React.Component {
+    render() {
+      return <div />
+    }
+  }
+  -const MyComponent = props => <div {...props} />
+  +const MyComponent = React.forwardRef((props, ref) => <div ref={ref} {...props} />);
+  <Tooltip><Component /></Tooltip>
+  <Tooltip><MyComponent /></Tooltip>
+  <Tooltip><div /></Tooltip>
+  ```