[next] Tooltips breaks line on spaces on a container with position: 'absolute'

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

Expected Behavior

The tooltip with a title of “Test Title” to be shown without line breaks:

Current Behavior

The tooltip adds a line break for every space in the title: At first I thought it was a length issue, but it doesn’t break when there’s no spaces:

Steps to Reproduce (for bugs)

https://codesandbox.io/s/2wnv5jw2xj

1. Container should have position: ‘absolute’
2. Add an IconButton surrounded by a Tooltip
3. Set Tooltip’s title to Test Title

Context

I’m making a floating menu with absolute positioning, that moves around the screen to line up with an active component.

Your Environment

Tech	Version
Material-UI	^1.0.0-beta.22
React	^15.5.4
browser	Chromium Version 63.0.3239.84 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)

[desktp]

Thanks for the workaround! I’ve tried messing with the positioning and widths, but it didn’t occur to me to override the internal classes.

[gregnb]

@desktp I think issue boils down to the container div that Popper uses to show the Tooltip. Because that container has a certain width the text inside will get squished and you end up with what appears as line breaks. Simple way around this is to just set the tooltip to be 100% width of that container

I forked your codesandbox was able to get it to work by utilizing the classes prop on Tooltip. https://codesandbox.io/s/8yj6ryzjx2

1. modify styles to provide width 100% for tooltip

const styles = {
  root: {
    textAlign: 'center',
    paddingTop: 200,
    position: 'absolute',
  },
  tooltip: {
    width: '100%'
  }
};

<Tooltip 
  placement="right-end" 
  title="Title with spaces"
  classes={{
    tooltip: this.props.classes.tooltip
  }}
>