Wrapping a Tooltip around a DISABLED button causes the Dom to wrap a span around that button

[nora-white]

• I have searched the issues of this repository and believe that this is not a duplicate.
  *** However it looks similar to this one posted in 2016 that was closed due to inactivity: Tooltip acts weird on the disabled button inside the table row. #4346.

Reproduction link

https://codepen.io/LittlePupper420/pen/GRKXqbL

Steps to reproduce

Inside of an Antd Tooltip, render an antd Button component that has the disabled attribute applied to it.

What is expected?

That the button renders as a Button only, with no wrapping <span></span>. The tooltip should still appear on hover. Should look like this:
<button disabled class='my-class-name my-other-class-name ant-btn'>...</button>

What is actually happening?

The button is wrapped with a , and the custom classNames that I have given my antd Button are moved into the span. The Tooltip still appears. So it looks like this:
<span class='my-class-name my-other-class-name'> <button disabled class='ant-btn'>...</button> </span>

Environment	Info
antd	3.23.2
React	React 16.9
System	Mac
Browser	Chrome

---

In my scenario, I have a button that is enabled and disabled based on a condition. When it is still enabled, the behaviour is normal, there is no <span></span> wrapping the <button></button>. When the button becomes disabled, suddenly the classNames are removed from my button and given to the span that I never wanted in the first place. This causes my CSS to be incorrectly applied.

In order to get around this issue, I'm having to wrap my Button in a <div>. Despite this working, this does not seem like a good fix.

Why does this behaviour happen when there is no change to the behaviour of the Tooltip?

[afc163]

https://github.com/ant-design/ant-design/pull/4865/files#diff-186839a30bf8b9d67a4b10bf7c091d5fR88
react-component/tooltip#18
#17449
#18534

[afc163]

#21404 (comment)