Расположение всплывающей подсказки в ячейке таблицы

Question

Я использую React и у меня есть таблица с некоторыми действиями (удаление, редактирование и т. Д.) В ячейке. И мне нужно поставить всплывающую подсказку на каждое действие. Я не использую jquery и не планирую, и не поддерживаю заголовки (мне нужно обновить эту подсказку до некоторых определенных данных или даже другого компонента).

Поэтому проблема в том, что я не могу правильно расположить подсказку (например, в середине верхней или нижней части). Witch params должен получить мой компонент и как это сделать с помощью css?

const Tooltip = ({position = 'top', display, style, children}) => {
  let displayClass = display ? `fade ${position} in` : `tooltip-${position}`
  return (
    <div className={`tooltip ${displayClass} `} role='tooltip'>
      <div className='tooltip-arrow' />
      <div className='tooltip-inner'>
        {children}
      </div>
    </div>

  )
}

const ActionLinkItem = ({page, action, data, onMouseEnter, onMouseLeave, display, tooltipText, id}) => {
  const {buttonClass, icon} = actionsStyles[action]
  return (
    <Link to={`/${page}/${action.toLowerCase()}/${data.id}`}>
      <a
        className={`btn btn-xs ${buttonClass}`}
        id={id}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
            ><i className={`fa fa-${icon}`} />
        <Tooltip display={display} action={action}>{tooltipText}</Tooltip>
      </a>
    </Link>
  )
}

export default class Actions extends Component {
  constructor (props) {
    super(props)
    this.state = {
      tooltipActive: ''
    }
  }

  handleHover (event) {
    this.setState({
      tooltipActive: event.target.id
    })
  }

  handleBlur (event) {
    this.setState({
      tooltipActive: ''
    })
  }

  getActionsTemplate () {
    const {actions, data, page} = this.props
    return actions.map(action => {
      let display = this.state.tooltipActive === `${action.action}-${data.id}`
      let id = `${action.action}-${data.id}`
      let tooltip = tooltipText[action.action].replace(/{type}/g, page).replace(/{item}/g, data.name
      return <ActionLinkItem
            key={`${data.id}-${action.action}`}
            page={page}
            action={action.action}
            data={data}
            id={id}
            tooltipText={tooltip}
            display={display}
            onMouseEnter={(e) => this.handleHover(e)}
            onMouseLeave={(e) => this.handleBlur(e)}
          />    
     })
   }

  render () {
    return (
      <div className='row'>
        {this.getActionsTemplate()}
      </div>
    )
  }
}

Answer 1

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

Итак, добавьте стиль position: relative в in ActionLinkItem и добавьте стиль `position: absolute к внешнему в Tooltip.

Для добавления кредита вам нужно установить ширину всплывающей подсказки и расположить или отцентрировать ее в ActionLinkItem, используя такие стили, как bottom: 100%,

Вы также можете выполнить некоторые вычисления, чтобы убедиться, что ваша подсказка не выходит за пределы страницы, перемещая ее влево и вправо, если содержимое находится справа или слева соответственно.