<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">When I tell a <code class="notranslate">&lt;Tooltip /&gt;</code> to be <code class="notranslate">placement='right'</code> I expected to be placed to the right of the reference.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">When I tell a <code class="notranslate">&lt;Tooltip /&gt;</code> to be <code class="notranslate">placement='right'</code> it is placed to the left of the reference, even when visual space is available. However, it looks like when one of its parent element is positioned (via <code class="notranslate">overflow</code> css property) is causing this odd behavior.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Go to: <a href="https://codesandbox.io/s/x97mv2ljnq" rel="nofollow">https://codesandbox.io/s/x97mv2ljnq</a></li>
<li>Hover the button and observe the tooltip appearing on the left instead of the right.</li>
<li>Comment line 14 (<code class="notranslate">overflowX: 'auto'</code>).</li>
<li>Hover the button and observe the tooltip appearing on the right as expected.</li>
</ol>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/439839/35955846-68ce383c-0c68-11e8-881c-1be85d7d44f5.gif"><img src="https://user-images.githubusercontent.com/439839/35955846-68ce383c-0c68-11e8-881c-1be85d7d44f5.gif" alt="mui-issue" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">Context</h2>
<p dir="auto">I need to wrap <code class="notranslate">&lt;Table /&gt;</code>s inside <code class="notranslate">overflowX: 'auto'</code> elements to allow user to horizontal scroll the contents when the table is wider than the viewport. Therefore, I would like to be able to use the tooltip with my desired placement being in the right of the reference (which is the last column of the table).</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.32</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome Version 64.0.3282.140 (Official Build) (64-bit)</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Related:</h2>
<ul dir="auto">
<li><a href="https://github.com/FezVrasta/popper.js/issues/535" data-hovercard-type="issue" data-hovercard-url="/floating-ui/floating-ui/issues/535/hovercard">Wrong positioning when overflow-y:hidden is used on parent</a></li>
</ul>
<p dir="auto">I have a tooltip for a list item on collapsed drawer and it does not show up because of the overflow hidden of the drawer. I basically want a portaled version of the tooltip.<br>
I've hacked together this working example where I wrapped the popper inside a portal component from your internal folder.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">tooltip is hidden and will not show up</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.22</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
</tbody>
</table>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React, { Children } from 'react'
import { findDOMNode } from 'react-dom'
import EventListener from 'react-event-listener'
import debounce from 'lodash/debounce'
import warning from 'warning'
import classNames from 'classnames'
import { Manager, Target, Popper } from 'react-popper'
import { capitalizeFirstLetter } from 'material-ui/utils/helpers'
import common from 'material-ui/colors/common'
import grey from 'material-ui/colors/grey'
import withStyles from 'material-ui/styles/withStyles'
import Portal from 'material-ui/internal/Portal'

// Use a class component so we can get a reference.
class TargetChildren extends React.Component {
  render() {
    return this.props.element
  }
}

export const styles = (theme: Object) =&gt; ({
  root: {
    display: 'inline',
    flexDirection: 'inherit', // Makes the wrapper more transparent.
  },
  popper: {
    zIndex: theme.zIndex.tooltip,
  },
  popperClose: {
    pointerEvents: 'none',
  },
  tooltip: {
    background: grey[700],
    borderRadius: 2,
    color: common.fullWhite,
    fontFamily: theme.typography.fontFamily,
    fontSize: theme.typography.pxToRem(14),
    minHeight: theme.spacing.unit * 4,
    lineHeight: '32px',
    opacity: 0,
    padding: `0 ${theme.spacing.unit}px`,
    transform: 'scale(0)',
    transition: theme.transitions.create(['opacity', 'transform'], {
      duration: theme.transitions.duration.shortest,
    }),
    [theme.breakpoints.up('sm')]: {
      minHeight: 22,
      lineHeight: '22px',
      padding: `0 ${theme.spacing.unit}px`,
      fontSize: theme.typography.pxToRem(10),
    },
  },
  tooltipLeft: {
    transformOrigin: 'right center',
    margin: `0 ${theme.spacing.unit * 3}px`,
    [theme.breakpoints.up('sm')]: {
      margin: '0 14px',
    },
  },
  tooltipRight: {
    transformOrigin: 'left center',
    margin: `0 ${theme.spacing.unit * 3}px`,
    [theme.breakpoints.up('sm')]: {
      margin: '0 14px',
    },
  },
  tooltipTop: {
    transformOrigin: 'center bottom',
    margin: `${theme.spacing.unit * 3}px 0`,
    [theme.breakpoints.up('sm')]: {
      margin: '14px 0',
    },
  },
  tooltipBottom: {
    transformOrigin: 'center top',
    margin: `${theme.spacing.unit * 3}px 0`,
    [theme.breakpoints.up('sm')]: {
      margin: '14px 0',
    },
  },
  tooltipOpen: {
    opacity: 0.9,
    transform: 'scale(1)',
  },
})

function flipPlacement(placement) {
  switch (placement) {
    case 'bottom-end':
      return 'bottom-start'
    case 'bottom-start':
      return 'bottom-end'
    case 'top-end':
      return 'top-start'
    case 'top-start':
      return 'top-end'
    default:
      return placement
  }
}

class Tooltip extends React.Component {
  static defaultProps = {
    disableTriggerFocus: false,
    disableTriggerHover: false,
    disableTriggerTouch: false,
    enterDelay: 0,
    leaveDelay: 0,
    placement: 'bottom',
  }

  state = {}

  componentWillMount() {
    const { props } = this

    this.isControlled = props.open !== undefined

    if (!this.isControlled) {
      // not controlled, use internal state
      this.setState({
        open: false,
      })
    }
  }

  componentDidMount() {
    warning(
      !this.children ||
        !this.children.disabled ||
        // $FlowFixMe
        !this.children.tagName.toLowerCase() === 'button',
      [
        'Material-UI: you are providing a disabled button children to the Tooltip component.',
        'A disabled element do not fire events.',
        'But the Tooltip needs to listen to the children element events to display the title.',
        '',
        'Place a `div` over top of the element.',
      ].join('\n')
    )
  }

  componentWillUnmount() {
    clearTimeout(this.enterTimer)
    clearTimeout(this.leaveTimer)
    this.handleResize.cancel()
  }

  enterTimer = null
  leaveTimer = null
  touchTimer = null
  isControlled = null
  popper = null
  children = null
  ignoreNonTouchEvents = false

  handleResize = debounce(() =&gt; {
    if (this.popper) {
      this.popper._popper.scheduleUpdate()
    }
  }, 166)

  handleRequestOpen = event =&gt; {
    const { children } = this.props
    if (typeof children !== 'string') {
      const childrenProps = Children.only(children).props

      if (event.type === 'focus' &amp;&amp; childrenProps.onFocus) {
        childrenProps.onFocus(event)
      }

      if (event.type === 'mouseover' &amp;&amp; childrenProps.onMouseOver) {
        childrenProps.onMouseOver(event)
      }
    }

    if (this.ignoreNonTouchEvents &amp;&amp; event.type !== 'touchstart') {
      return
    }

    clearTimeout(this.leaveTimer)
    if (this.props.enterDelay &gt; 0) {
      this.leaveTimer = setTimeout(() =&gt; {
        this.requestOpen(event)
      }, this.props.enterDelay)
    } else {
      this.requestOpen(event)
    }
  }

  requestOpen = event =&gt; {
    if (!this.isControlled) {
      this.setState({ open: true })
    }

    if (this.props.onRequestOpen) {
      this.props.onRequestOpen(event, true)
    }
  }

  handleRequestClose = event =&gt; {
    const { children } = this.props
    if (typeof children !== 'string') {
      const childrenProps = Children.only(children).props

      if (event.type === 'blur' &amp;&amp; childrenProps.onBlur) {
        childrenProps.onBlur(event)
      }

      if (event.type === 'mouseleave' &amp;&amp; childrenProps.onMouseLeave) {
        childrenProps.onMouseLeave(event)
      }
    }

    clearTimeout(this.leaveTimer)
    if (this.props.leaveDelay) {
      this.leaveTimer = setTimeout(() =&gt; {
        this.requestClose(event)
      }, this.props.leaveDelay)
    } else {
      this.requestClose(event)
    }
  }

  requestClose = event =&gt; {
    this.ignoreNonTouchEvents = false

    if (!this.isControlled) {
      this.setState({ open: false })
    }

    if (this.props.onRequestClose) {
      this.props.onRequestClose(event, false)
    }
  }

  handleTouchStart = event =&gt; {
    this.ignoreNonTouchEvents = true
    const { children } = this.props
    if (typeof children !== 'string') {
      const childrenProps = Children.only(children).props

      if (childrenProps.onTouchStart) {
        childrenProps.onTouchStart(event)
      }
    }

    clearTimeout(this.touchTimer)
    event.persist()
    this.touchTimer = setTimeout(() =&gt; {
      this.handleRequestOpen(event)
    }, 1e3)
  }

  handleTouchEnd = event =&gt; {
    const { children } = this.props
    if (typeof children !== 'string') {
      const childrenProps = Children.only(children).props

      if (childrenProps.onTouchEnd) {
        childrenProps.onTouchEnd(event)
      }
    }

    clearTimeout(this.touchTimer)
    clearTimeout(this.leaveTimer)
    event.persist()
    this.leaveTimer = setTimeout(() =&gt; {
      this.requestClose(event)
    }, 1500 + this.props.leaveDelay)
  }

  render() {
    const {
      children: childrenProp,
      classes,
      className,
      disableTriggerFocus,
      disableTriggerHover,
      disableTriggerTouch,
      enterDelay,
      id,
      leaveDelay,
      open: openProp,
      onRequestClose,
      onRequestOpen,
      theme,
      title,
      placement: rawPlacement,
      PopperProps: { PopperClassName, ...PopperOther } = {},
      ...other
    } = this.props

    const themeDirection = theme &amp;&amp; theme.direction
    const placement = themeDirection === 'rtl' ? flipPlacement(rawPlacement) : rawPlacement
    const open = this.isControlled ? openProp : this.state.open
    const childrenProps = {}

    childrenProps['aria-describedby'] = id

    if (!disableTriggerTouch) {
      childrenProps.onTouchStart = this.handleTouchStart
      childrenProps.onTouchEnd = this.handleTouchEnd
    }

    if (!disableTriggerHover) {
      childrenProps.onMouseOver = this.handleRequestOpen
      childrenProps.onMouseLeave = this.handleRequestClose
    }

    if (!disableTriggerFocus) {
      childrenProps.onFocus = this.handleRequestOpen
      childrenProps.onBlur = this.handleRequestClose
    }

    if (typeof childrenProp !== 'string' &amp;&amp; childrenProp.props) {
      warning(
        !childrenProp.props.title,
        [
          'Material-UI: you have been providing a `title` property to the child of &lt;Tooltip /&gt;.',
          `Remove this title property \`${childrenProp.props.title}\` or the Tooltip component.`,
        ].join('\n')
      )
    }

    return (
      &lt;EventListener target=&quot;window&quot; onResize={this.handleResize}&gt;
        &lt;Manager className={classNames(classes.root, className)} {...other}&gt;
          &lt;Target&gt;
            {({ targetProps }) =&gt; (
              &lt;TargetChildren
                element={
                  typeof childrenProp !== 'string'
                    ? React.cloneElement(childrenProp, childrenProps)
                    : childrenProp
                }
                ref={node =&gt; {
                  this.children = findDOMNode(node)
                  targetProps.ref(this.children)
                }}
              /&gt;
            )}
          &lt;/Target&gt;
          &lt;Portal open={open}&gt;
            &lt;Popper
              placement={placement}
              eventsEnabled={open}
              className={classNames(
                classes.popper,
                { [classes.popperClose]: !open },
                PopperClassName
              )}
              {...PopperOther}
              ref={node =&gt; {
                this.popper = node
              }}&gt;
              {({ popperProps, restProps }) =&gt; (
                &lt;div
                  {...popperProps}
                  {...restProps}
                  style={{
                    ...popperProps.style,
                    left: popperProps.style.left || 0,
                    ...restProps.style,
                  }}&gt;
                  &lt;div
                    id={id}
                    role=&quot;tooltip&quot;
                    aria-hidden={!open}
                    className={classNames(
                      classes.tooltip,
                      { [classes.tooltipOpen]: open },
                      classes[`tooltip${capitalizeFirstLetter(placement.split('-')[0])}`]
                    )}&gt;
                    {title}
                  &lt;/div&gt;
                &lt;/div&gt;
              )}
            &lt;/Popper&gt;
          &lt;/Portal&gt;
        &lt;/Manager&gt;
      &lt;/EventListener&gt;
    )
  }
}

export default withStyles(styles, { name: 'MuiTooltip', withTheme: true })(Tooltip)
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Children</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">findDOMNode</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom'</span>
<span class="pl-k">import</span> <span class="pl-v">EventListener</span> <span class="pl-k">from</span> <span class="pl-s">'react-event-listener'</span>
<span class="pl-k">import</span> <span class="pl-s1">debounce</span> <span class="pl-k">from</span> <span class="pl-s">'lodash/debounce'</span>
<span class="pl-k">import</span> <span class="pl-s1">warning</span> <span class="pl-k">from</span> <span class="pl-s">'warning'</span>
<span class="pl-k">import</span> <span class="pl-s1">classNames</span> <span class="pl-k">from</span> <span class="pl-s">'classnames'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Manager</span><span class="pl-kos">,</span> <span class="pl-v">Target</span><span class="pl-kos">,</span> <span class="pl-v">Popper</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-popper'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">capitalizeFirstLetter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/utils/helpers'</span>
<span class="pl-k">import</span> <span class="pl-s1">common</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/colors/common'</span>
<span class="pl-k">import</span> <span class="pl-s1">grey</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/colors/grey'</span>
<span class="pl-k">import</span> <span class="pl-s1">withStyles</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/styles/withStyles'</span>
<span class="pl-k">import</span> <span class="pl-v">Portal</span> <span class="pl-k">from</span> <span class="pl-s">'material-ui/internal/Portal'</span>

<span class="pl-c">// Use a class component so we can get a reference.</span>
<span class="pl-k">class</span> <span class="pl-v">TargetChildren</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">element</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">const</span> <span class="pl-en">styles</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">theme</span>: <span class="pl-v">Object</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">root</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">display</span>: <span class="pl-s">'inline'</span><span class="pl-kos">,</span>
    <span class="pl-c1">flexDirection</span>: <span class="pl-s">'inherit'</span><span class="pl-kos">,</span> <span class="pl-c">// Makes the wrapper more transparent.</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">popper</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">zIndex</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">zIndex</span><span class="pl-kos">.</span><span class="pl-c1">tooltip</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">popperClose</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">pointerEvents</span>: <span class="pl-s">'none'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">tooltip</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">background</span>: <span class="pl-s1">grey</span><span class="pl-kos">[</span><span class="pl-c1">700</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">borderRadius</span>: <span class="pl-c1">2</span><span class="pl-kos">,</span>
    <span class="pl-c1">color</span>: <span class="pl-s1">common</span><span class="pl-kos">.</span><span class="pl-c1">fullWhite</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontFamily</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-c1">fontFamily</span><span class="pl-kos">,</span>
    <span class="pl-c1">fontSize</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-en">pxToRem</span><span class="pl-kos">(</span><span class="pl-c1">14</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">minHeight</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">4</span><span class="pl-kos">,</span>
    <span class="pl-c1">lineHeight</span>: <span class="pl-s">'32px'</span><span class="pl-kos">,</span>
    <span class="pl-c1">opacity</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c1">padding</span>: <span class="pl-s">`0 <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span><span class="pl-kos">}</span></span>px`</span><span class="pl-kos">,</span>
    <span class="pl-c1">transform</span>: <span class="pl-s">'scale(0)'</span><span class="pl-kos">,</span>
    <span class="pl-c1">transition</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">transitions</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'opacity'</span><span class="pl-kos">,</span> <span class="pl-s">'transform'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">duration</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">transitions</span><span class="pl-kos">.</span><span class="pl-c1">duration</span><span class="pl-kos">.</span><span class="pl-c1">shortest</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">breakpoints</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s">'sm'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">minHeight</span>: <span class="pl-c1">22</span><span class="pl-kos">,</span>
      <span class="pl-c1">lineHeight</span>: <span class="pl-s">'22px'</span><span class="pl-kos">,</span>
      <span class="pl-c1">padding</span>: <span class="pl-s">`0 <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span><span class="pl-kos">}</span></span>px`</span><span class="pl-kos">,</span>
      <span class="pl-c1">fontSize</span>: <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">typography</span><span class="pl-kos">.</span><span class="pl-en">pxToRem</span><span class="pl-kos">(</span><span class="pl-c1">10</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">tooltipLeft</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">transformOrigin</span>: <span class="pl-s">'right center'</span><span class="pl-kos">,</span>
    <span class="pl-c1">margin</span>: <span class="pl-s">`0 <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">3</span><span class="pl-kos">}</span></span>px`</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">breakpoints</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s">'sm'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">margin</span>: <span class="pl-s">'0 14px'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">tooltipRight</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">transformOrigin</span>: <span class="pl-s">'left center'</span><span class="pl-kos">,</span>
    <span class="pl-c1">margin</span>: <span class="pl-s">`0 <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">3</span><span class="pl-kos">}</span></span>px`</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">breakpoints</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s">'sm'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">margin</span>: <span class="pl-s">'0 14px'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">tooltipTop</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">transformOrigin</span>: <span class="pl-s">'center bottom'</span><span class="pl-kos">,</span>
    <span class="pl-c1">margin</span>: <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">3</span><span class="pl-kos">}</span></span>px 0`</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">breakpoints</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s">'sm'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">margin</span>: <span class="pl-s">'14px 0'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">tooltipBottom</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">transformOrigin</span>: <span class="pl-s">'center top'</span><span class="pl-kos">,</span>
    <span class="pl-c1">margin</span>: <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">spacing</span><span class="pl-kos">.</span><span class="pl-c1">unit</span> <span class="pl-c1">*</span> <span class="pl-c1">3</span><span class="pl-kos">}</span></span>px 0`</span><span class="pl-kos">,</span>
    <span class="pl-kos">[</span><span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">breakpoints</span><span class="pl-kos">.</span><span class="pl-en">up</span><span class="pl-kos">(</span><span class="pl-s">'sm'</span><span class="pl-kos">)</span><span class="pl-kos">]</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">margin</span>: <span class="pl-s">'14px 0'</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">tooltipOpen</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">opacity</span>: <span class="pl-c1">0.9</span><span class="pl-kos">,</span>
    <span class="pl-c1">transform</span>: <span class="pl-s">'scale(1)'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

<span class="pl-k">function</span> <span class="pl-en">flipPlacement</span><span class="pl-kos">(</span><span class="pl-s1">placement</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">switch</span> <span class="pl-kos">(</span><span class="pl-s1">placement</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">case</span> <span class="pl-s">'bottom-end'</span>:
      <span class="pl-k">return</span> <span class="pl-s">'bottom-start'</span>
    <span class="pl-k">case</span> <span class="pl-s">'bottom-start'</span>:
      <span class="pl-k">return</span> <span class="pl-s">'bottom-end'</span>
    <span class="pl-k">case</span> <span class="pl-s">'top-end'</span>:
      <span class="pl-k">return</span> <span class="pl-s">'top-start'</span>
    <span class="pl-k">case</span> <span class="pl-s">'top-start'</span>:
      <span class="pl-k">return</span> <span class="pl-s">'top-end'</span>
    <span class="pl-k">default</span>:
      <span class="pl-k">return</span> <span class="pl-s1">placement</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">Tooltip</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-k">static</span> <span class="pl-c1">defaultProps</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-c1">disableTriggerFocus</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">disableTriggerHover</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">disableTriggerTouch</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">enterDelay</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c1">leaveDelay</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span>
    <span class="pl-c1">placement</span>: <span class="pl-s">'bottom'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

  <span class="pl-en">componentWillMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> props <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span>

    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isControlled</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">open</span> <span class="pl-c1">!==</span> <span class="pl-c1">undefined</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isControlled</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-c">// not controlled, use internal state</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
        <span class="pl-c1">open</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">componentDidMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">warning</span><span class="pl-kos">(</span>
      <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">children</span> <span class="pl-c1">||</span>
        <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">.</span><span class="pl-c1">disabled</span> <span class="pl-c1">||</span>
        <span class="pl-c">// $FlowFixMe</span>
        <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">.</span><span class="pl-c1">tagName</span><span class="pl-kos">.</span><span class="pl-en">toLowerCase</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s">'button'</span><span class="pl-kos">,</span>
      <span class="pl-kos">[</span>
        <span class="pl-s">'Material-UI: you are providing a disabled button children to the Tooltip component.'</span><span class="pl-kos">,</span>
        <span class="pl-s">'A disabled element do not fire events.'</span><span class="pl-kos">,</span>
        <span class="pl-s">'But the Tooltip needs to listen to the children element events to display the title.'</span><span class="pl-kos">,</span>
        <span class="pl-s">''</span><span class="pl-kos">,</span>
        <span class="pl-s">'Place a `div` over top of the element.'</span><span class="pl-kos">,</span>
      <span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">'\n'</span><span class="pl-kos">)</span>
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">componentWillUnmount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">enterTimer</span><span class="pl-kos">)</span>
    <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">leaveTimer</span><span class="pl-kos">)</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleResize</span><span class="pl-kos">.</span><span class="pl-en">cancel</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">enterTimer</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
  <span class="pl-c1">leaveTimer</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
  <span class="pl-c1">touchTimer</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
  <span class="pl-c1">isControlled</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
  <span class="pl-c1">popper</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
  <span class="pl-c1">children</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span>
  <span class="pl-c1">ignoreNonTouchEvents</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span>

  <span class="pl-c1">handleResize</span> <span class="pl-c1">=</span> <span class="pl-en">debounce</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">popper</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">popper</span><span class="pl-kos">.</span><span class="pl-c1">_popper</span><span class="pl-kos">.</span><span class="pl-en">scheduleUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">166</span><span class="pl-kos">)</span>

  <span class="pl-c1">handleRequestOpen</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> children <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">children</span> <span class="pl-c1">!==</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">childrenProps</span> <span class="pl-c1">=</span> <span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">props</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">===</span> <span class="pl-s">'focus'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onFocus</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-en">onFocus</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">===</span> <span class="pl-s">'mouseover'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onMouseOver</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-en">onMouseOver</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ignoreNonTouchEvents</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">!==</span> <span class="pl-s">'touchstart'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">leaveTimer</span><span class="pl-kos">)</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">enterDelay</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">leaveTimer</span> <span class="pl-c1">=</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">requestOpen</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">enterDelay</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">requestOpen</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">requestOpen</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isControlled</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">open</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">onRequestOpen</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-en">onRequestOpen</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">handleRequestClose</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> children <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">children</span> <span class="pl-c1">!==</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">childrenProps</span> <span class="pl-c1">=</span> <span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">props</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">===</span> <span class="pl-s">'blur'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onBlur</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-en">onBlur</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">type</span> <span class="pl-c1">===</span> <span class="pl-s">'mouseleave'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onMouseLeave</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-en">onMouseLeave</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">leaveTimer</span><span class="pl-kos">)</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">leaveDelay</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">leaveTimer</span> <span class="pl-c1">=</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">requestClose</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">leaveDelay</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">requestClose</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">requestClose</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ignoreNonTouchEvents</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isControlled</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">open</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">onRequestClose</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-en">onRequestClose</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">,</span> <span class="pl-c1">false</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">handleTouchStart</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">ignoreNonTouchEvents</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> children <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">children</span> <span class="pl-c1">!==</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">childrenProps</span> <span class="pl-c1">=</span> <span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">props</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onTouchStart</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-en">onTouchStart</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">touchTimer</span><span class="pl-kos">)</span>
    <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-en">persist</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">touchTimer</span> <span class="pl-c1">=</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">handleRequestOpen</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">1e3</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-c1">handleTouchEnd</span> <span class="pl-c1">=</span> <span class="pl-s1">event</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span> children <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-s1">children</span> <span class="pl-c1">!==</span> <span class="pl-s">'string'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">childrenProps</span> <span class="pl-c1">=</span> <span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">props</span>

      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onTouchEnd</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-en">onTouchEnd</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">touchTimer</span><span class="pl-kos">)</span>
    <span class="pl-en">clearTimeout</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">leaveTimer</span><span class="pl-kos">)</span>
    <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-en">persist</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">leaveTimer</span> <span class="pl-c1">=</span> <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">requestClose</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">1500</span> <span class="pl-c1">+</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">leaveDelay</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-kos">{</span>
      <span class="pl-c1">children</span>: <span class="pl-s1">childrenProp</span><span class="pl-kos">,</span>
      classes<span class="pl-kos">,</span>
      className<span class="pl-kos">,</span>
      disableTriggerFocus<span class="pl-kos">,</span>
      disableTriggerHover<span class="pl-kos">,</span>
      disableTriggerTouch<span class="pl-kos">,</span>
      enterDelay<span class="pl-kos">,</span>
      id<span class="pl-kos">,</span>
      leaveDelay<span class="pl-kos">,</span>
      <span class="pl-c1">open</span>: <span class="pl-s1">openProp</span><span class="pl-kos">,</span>
      onRequestClose<span class="pl-kos">,</span>
      onRequestOpen<span class="pl-kos">,</span>
      theme<span class="pl-kos">,</span>
      title<span class="pl-kos">,</span>
      <span class="pl-c1">placement</span>: <span class="pl-s1">rawPlacement</span><span class="pl-kos">,</span>
      <span class="pl-c1">PopperProps</span>: <span class="pl-kos">{</span> PopperClassName<span class="pl-kos">,</span> ...<span class="pl-v">PopperOther</span> <span class="pl-kos">}</span><span class="pl-kos"></span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
      ...<span class="pl-s1">other</span>
    <span class="pl-kos">}</span><span class="pl-c1"></span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span>

    <span class="pl-c1">const</span><span class="pl-kos"></span> <span class="pl-c1">themeDirection</span> <span class="pl-c1">=</span> <span class="pl-s1">theme</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">theme</span><span class="pl-kos">.</span><span class="pl-c1">direction</span>
    <span class="pl-c1">const</span> <span class="pl-s1">placement</span> <span class="pl-c1">=</span> <span class="pl-s1">themeDirection</span> <span class="pl-c1">===</span> <span class="pl-s">'rtl'</span> ? <span class="pl-en">flipPlacement</span><span class="pl-kos">(</span><span class="pl-s1">rawPlacement</span><span class="pl-kos">)</span> : <span class="pl-s1">rawPlacement</span>
    <span class="pl-c1">const</span> <span class="pl-s1">open</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isControlled</span> ? <span class="pl-s1">openProp</span> : <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">.</span><span class="pl-c1">open</span>
    <span class="pl-c1">const</span><span class="pl-kos"></span> <span class="pl-c1">childrenProps</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>

    <span class="pl-c1">childrenProps</span><span class="pl-kos"></span><span class="pl-kos">[</span><span class="pl-s">'aria-describedby'</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s1">id</span>

    <span class="pl-en">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">disableTriggerTouch</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onTouchStart</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleTouchStart</span>
      <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onTouchEnd</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleTouchEnd</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">disableTriggerHover</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onMouseOver</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleRequestOpen</span>
      <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onMouseLeave</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleRequestClose</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">disableTriggerFocus</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onFocus</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleRequestOpen</span>
      <span class="pl-s1">childrenProps</span><span class="pl-kos">.</span><span class="pl-c1">onBlur</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">handleRequestClose</span>
    <span class="pl-kos">}</span>

    <span class="pl-en">if</span> <span class="pl-kos">(</span><span class="pl-s1">typeof</span> <span class="pl-s1">childrenProp</span> <span class="pl-c1">!==</span> '<span class="pl-s1">string</span>' <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">childrenProp</span><span class="pl-kos">.</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-en">warning</span><span class="pl-kos">(</span>
        <span class="pl-c1">!</span><span class="pl-s1">childrenProp</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">,</span>
        <span class="pl-kos">[</span>
          <span class="pl-s">'Material-UI: you have been providing a `title` property to the child of &lt;Tooltip /&gt;.'</span><span class="pl-kos">,</span>
          <span class="pl-s">`Remove this title property \`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">childrenProp</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">}</span></span>\` or the Tooltip component.`</span><span class="pl-kos">,</span>
        <span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s">'\n'</span><span class="pl-kos">)</span>
      <span class="pl-kos">)</span>
    <span class="pl-kos">}</span>

    <span class="pl-c1">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-v">EventListener</span> <span class="pl-s1">target</span><span class="pl-c1">=</span><span class="pl-s">"window"</span> <span class="pl-s1">onResize</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">this</span><span class="pl-kos">.</span>handleResize<span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Manager</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">classNames</span><span class="pl-kos">(</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">root</span><span class="pl-kos">,</span> <span class="pl-s1">className</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-kos">{</span>...<span class="pl-s1">other</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Target</span><span class="pl-c1">&gt;</span>
            <span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">{</span> targetProps <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">TargetChildren</span>
                <span class="pl-c1">element</span><span class="pl-c1">=</span><span class="pl-kos">{</span>
                  <span class="pl-k">typeof</span> <span class="pl-s1">childrenProp</span> <span class="pl-c1">!==</span> <span class="pl-s">'string'</span>
                    ? <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">childrenProp</span><span class="pl-kos">,</span> <span class="pl-s1">childrenProps</span><span class="pl-kos">)</span>
                    : <span class="pl-s1">childrenProp</span>
                <span class="pl-kos">}</span>
                <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">node</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">children</span> <span class="pl-c1">=</span> <span class="pl-en">findDOMNode</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">)</span>
                  <span class="pl-s1">targetProps</span><span class="pl-kos">.</span><span class="pl-en">ref</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">)</span>
                <span class="pl-kos">}</span><span class="pl-kos">}</span>
              <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
            <span class="pl-kos">)</span><span class="pl-kos">}</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Target</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">Portal</span> <span class="pl-c1">open</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">open</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-ent">Popper</span>
              <span class="pl-c1">placement</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">placement</span><span class="pl-kos">}</span>
              <span class="pl-c1">eventsEnabled</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">open</span><span class="pl-kos">}</span>
              <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">classNames</span><span class="pl-kos">(</span>
                <span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">popper</span><span class="pl-kos">,</span>
                <span class="pl-kos">{</span> <span class="pl-kos">[</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">popperClose</span><span class="pl-kos">]</span>: <span class="pl-c1">!</span><span class="pl-s1">open</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                <span class="pl-v">PopperClassName</span>
              <span class="pl-kos">)</span><span class="pl-kos">}</span>
              <span class="pl-kos">{</span>...<span class="pl-v">PopperOther</span><span class="pl-kos">}</span>
              <span class="pl-c1">ref</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">node</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">popper</span> <span class="pl-c1">=</span> <span class="pl-s1">node</span>
              <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
              <span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">{</span> popperProps<span class="pl-kos">,</span> restProps <span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">div</span>
                  <span class="pl-kos">{</span>...<span class="pl-s1">popperProps</span><span class="pl-kos">}</span>
                  <span class="pl-kos">{</span>...<span class="pl-s1">restProps</span><span class="pl-kos">}</span>
                  <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span>
                    ...<span class="pl-s1">popperProps</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">,</span>
                    <span class="pl-c1">left</span>: <span class="pl-s1">popperProps</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">.</span><span class="pl-c1">left</span> <span class="pl-c1">||</span> <span class="pl-c1">0</span><span class="pl-kos">,</span>
                    ...<span class="pl-s1">restProps</span><span class="pl-kos">.</span><span class="pl-c1">style</span><span class="pl-kos">,</span>
                  <span class="pl-kos">}</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span>
                    <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">id</span><span class="pl-kos">}</span>
                    <span class="pl-c1">role</span><span class="pl-c1">=</span><span class="pl-s">"tooltip"</span>
                    <span class="pl-c1">aria-hidden</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">!</span><span class="pl-s1">open</span><span class="pl-kos">}</span>
                    <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">classNames</span><span class="pl-kos">(</span>
                      <span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">tooltip</span><span class="pl-kos">,</span>
                      <span class="pl-kos">{</span> <span class="pl-kos">[</span><span class="pl-s1">classes</span><span class="pl-kos">.</span><span class="pl-c1">tooltipOpen</span><span class="pl-kos">]</span>: <span class="pl-s1">open</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
                      <span class="pl-s1">classes</span><span class="pl-kos">[</span><span class="pl-s">`tooltip<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">capitalizeFirstLetter</span><span class="pl-kos">(</span><span class="pl-s1">placement</span><span class="pl-kos">.</span><span class="pl-en">split</span><span class="pl-kos">(</span><span class="pl-s">'-'</span><span class="pl-kos">)</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">]</span>
                    <span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
                    <span class="pl-kos">{</span><span class="pl-s1">title</span><span class="pl-kos">}</span>
                  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
              <span class="pl-kos">)</span><span class="pl-kos">}</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Popper</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Portal</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Manager</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span>EventListener&gt;
    <span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-en">styles</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">'MuiTooltip'</span><span class="pl-kos">,</span> <span class="pl-c1">withTheme</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">Tooltip</span><span class="pl-kos">)</span></pre></div>