Tip - hovering over child creates empty divs that aren't cleaned up

Hovering over the child component wrapped by Tip will create empty <div></div>

Expected Behavior

If a div is created for whatever reason, it’s also cleaned up afterwards

Actual Behavior

Hovering over the child component wrapped in Tip will endlessly create more divs

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/bitter-sunset-edyo97?file=/src/App.tsx

Steps to Reproduce (In the Codesandbox example)

1. Wrap an element with Tip (example uses <button/>)
2. Open devtools and inspect elements
3. Navigate to the <iframe/> element of the codesandbox preview window
4. Navigate to the <body/> element within that
5. Now hover over the component wrapped in Tip
6. Notice the empty div elements are being appended to the end of the <body/>

Your Environment

• Grommet version:2.26.0 in Codesandbox; Also experienced in 2.25.1
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): macOS 11.6.5

[raji2004]

i would love to be assigned this issue

[jcfilben]

Hey @raji2004 I’m going to un-assign you from this so someone else has the chance to work on it. If you are still interested in working on this just leave a comment and I can re-assign you