Всплывающая подсказка React Material в списке не будет открыта при наведении

Question

Я реализую пользовательский интерфейс материала List который отображает список пользователей и генерирует новый ListItem для каждого из них. Каждый из них ListItemЭто изображение профиля пользователя, и я хочу, чтобы при наведении курсора на это изображение появлялась всплывающая подсказка с информацией о пользователе.

Это работает просто отлично. Тем не менее, я не могу понять, почему у меня возникают проблемы, пытаясь получить Tooltip в каждом ListItem на самом деле оставаться открытым при наведении на него. В настоящее время, как только оно покидает изображение, всплывающая подсказка удаляется (что, опять же, я не хочу, чтобы происходило).

Из документации похоже на использование interactive на Tooltip компонент должен исправить это поведение, но оно просто не работает для меня...

Если отбросить некоторую внутреннюю логику, то по сути это то, о чем я говорю:

import React, { Component } from 'react'
import {
  List,
  ListItem,
  ListItemText,
  Tooltip
} from '@material-ui/core'
import { withStyles } from '@material-ui/core/styles'
import classNames from 'classnames'

const styles = theme => ({
  flex: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  defaultIconContainer: {
    position: 'relative',
    borderRadius: '50%',
    backgroundColor: 'orange', // use theme global variable
    width: '40px',
    height: '40px'
  },
  defaultIconTextContainer: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    padding: '0 !important'
  },
  defaultIconText: {
    color: theme.palette.text.contrastText
  },
  thumbnailImage: {
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    margin: '0 5px 10px'
  }
})

type Props = {
  type: ?string,
  usersList: Array
}

class HelpUsers extends Component<Props> {
  defaultProps = {
    type: 'thumbnail',
    usersList: []
  }

  thumbnail = ({ user, classes }) => (
      <ListItem
        key={user.id}
        disableGutters
        className={classNames(
          classes.defaultIconContainer,
          classes.thumbnailImage
        )}
        style={{
          backgroundImage: `url(${user.profilePicture})`
        }}
      >
        <Tooltip
          title={
            <React.Fragment>
              <div>{user.name}</div>
              <div>{user.title}</div>
              <div>{user.company}</div>
              <div>p: {user.mobilePhone}</div>
              <div>c: {user.workPhone}</div>
              <div>e: {user.email}</div>
            </React.Fragment>
          }
          interactive
        >
          <div style={{ opacity: 0 }}>{user.name}</div>
        </Tooltip>
      </ListItem>
  )

  render() {
    const { usersList, classes } = this.props

    if (this.props.type === 'thumbnail') {
      return (
        <List className={classes.flex}>
          {
            usersList.map(user => this.thumbnail({ user, classes }))
          }
        </List>
      )
    }

    return <div>Hello</div>
  }
}

export default withStyles(styles)(HelpUsers)

И вот пример userList:

const users = [
  {
    id: 1,
    name: 'Test Name 1',
    profilePicture: 'https://fillmurray.com/200/300',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: '[e-mail]',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 2,
    name: 'Test Name 2',
    profilePicture: 'https://fillmurray.com/100/300',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: '[e-mail]',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 3,
    name: 'Test Name 3',
    profilePicture: 'https://fillmurray.com/200/400',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: '[e-mail]',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 4,
    name: 'Test Name 4',
    profilePicture: 'https://fillmurray.com/400/400',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: '[e-mail]',
    company: 'Company Name',
    title: 'Senior Something'
  },
  {
    id: 5,
    name: 'Test Name 5',
    profilePicture: 'https://fillmurray.com/400/500',
    workPhone: '123-123-1231',
    mobilePhone: '456-456-4564',
    email: '[e-mail]',
    company: 'Company Name',
    title: 'Senior Something'
  }
]

Любая помощь будет высоко ценится!

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

РЕДАКТИРОВАТЬ:

На самом деле я только что создал следующие коды и окно, и по какой-то причине он работает правильно здесь, но не в моем приложении... Возможно, мне придется взглянуть на некоторые уровни вверх, чтобы понять, почему это влияет на поведение:

https://codesandbox.io/s/00x4z00040

Answer 1

Что ж, это смущает... Похоже, я работал со старой версией пользовательского интерфейса Material в моем приложении, поэтому коды и boxbox работали. Я решил сменить версию на последнюю (3.5.1) и проблема решена... Оставив это здесь, потому что это может быть как-то помочь / напомнить людям также проверить версии.