Popover and tooltip are not displayed for custom components

[Dainius14]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Create a custom component and use it in a popover or tooltip.

What is expected?

Popover/tooltip is shown when hovering over the element

What is actually happening?

Popover/tooltip is not shown

Environment	Info
antd	3.16.1
React	16.8.3
System	Windows 10
Browser	Vivaldi 2.4.1488.35, Firefox 66.0.1

---

Wrapping the component inside a

or in popover itself solves the problem. DOM is identical for both cases.

[afc163]

Check https://codesandbox.io/s/sweet-bessie-t9wr74?file=/src/index.js

- const Item = ({ text }) => {
-   return <span>text</span>;
+ const Item = ({ text, ...props }) => {
+   return <span {...props}>text</span>;
  }

You should pass props to children element.

See #15528 (comment)

https://ant.design/components/tooltip-cn#%E4%B8%BA%E4%BD%95%E6%9C%89%E6%97%B6%E5%80%99-hoc-%E7%BB%84%E4%BB%B6%E6%97%A0%E6%B3%95%E7%94%9F%E6%95%88

[afc163]

#15528 (comment)

[naivefun]

One workaround is to wrap your custom element with HTML tag

<Popover content={}>
    <div className="inline-flex"><CustomComponent/></div>
</Popover>

The wrapper class could be display: contents but I didn't try myself.

[afc163]

https://ant.design/components/tooltip-cn#%E4%B8%BA%E4%BD%95%E6%9C%89%E6%97%B6%E5%80%99-hoc-%E7%BB%84%E4%BB%B6%E6%97%A0%E6%B3%95%E7%94%9F%E6%95%88