Issues with Tooltips in Form Labels since upgrade to 2.8

[acomito]

Environment(required)

• antd version: 2.8.0
• OS and its version: mac
• Browser and its version: Safari and Chrome

What did you do? Please provide steps to re-produce your problem.

I tried to nest a tooltip in a form label like the registration form example:

https://ant.design/components/form/

In the past, this nesting of tooltips has worked. I think something may have broken on the 2.8.0 version?

What do you expected?

It was working, but does not work anymore. It is also worth noting that tooltips work outside normally, but just not when passed as a prop for form label.

What happen?

I did not see a tooltip pop up.

Re-producible online demo

http://codepen.io/anon/pen/mWRWzm?editors=0011

// You should fork and save if you had updated this CodePend and want to send it to others.
// Note: antd.locales are only support by `dist/antd`
const { LocaleProvider, Switch, Form, Tooltip, Icon, locales, version } = antd;
moment.locale('en');


const FormItem = Form.Item;

const FormArea = Form.create()(React.createClass({
  getInitialState () {
    return {};
  },
   render() {

      const { getFieldDecorator } = this.props.form;
     return (
      <Form onSubmit={()=>console.log('submit')} >
        <FormItem label={(
            <span>
              Nickname&nbsp;
              <Tooltip title="What do you want other to call you?">
                <Icon type="question-circle-o" />
              </Tooltip>
            </span>
          )}>
            {getFieldDecorator('switchField', { rules: [{ required: false }],valuePropName: 'checked' })(
              <Switch />
            )}
          </FormItem>
      </Form>
     );
  },
}));
  


ReactDOM.render(
  <div>
    <p className="version">antd version: {version}</p>
    <LocaleProvider locale={locales.en_US}>
         <div>
         <Tooltip title="What do you want other to call you?">
          <Icon type="question-circle-o" />
         </Tooltip>
         <FormArea />
           
        </div>
    </LocaleProvider>
  </div>
, mountNode);

[benjycui]

Actually, it works fine, even in your demo.

Just make Tooltip[title] shorter, you will know what I said:

- <Tooltip title="What do you want other to call you?">
+ <Tooltip title="?">

[acomito]

hmm... but wont most use cases call for a tooltip with a sentence or sentences rather than a few characters? I guess I'm confused because it was working prior to updating to 2.8.

[acomito]

I'm trying to track down the issue. This is the same code, same browser. One is 2.7.2 and the other is 2.8:

http://g.recordit.co/aDLz03GA9l.gif

http://g.recordit.co/fP9vjg1pUB.gif

Even my layout seems to shift for some reason. i'm going through the changelog now.

[afc163]

It is our bug.

[acomito]

oh okay, thanks @afc163!

Update:

Tooltips seem to work when you set layout='inline' but doesn't work with vertical or with no layout set.

[afc163]

• vertical works: http://codepen.io/anon/pen/XMpoBQ?editors=0011
• inline works: http://codepen.io/anon/pen/WpRLaJ?editors=0011
• horizontal doesn't work: http://codepen.io/anon/pen/VpPqVj?editors=0011

---

• horizontal at 2.7.4, works: http://codepen.io/anon/pen/evgbbo?editors=0011

[afc163]

We should use @media (max-width: @screen-sm) { over @media (min-width: @screen-sm) {. Don't change default styles of form item in 2.7.x.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.