表格单元格中的工具提示定位

Question

我正在使用 React，并且在单元格中有一个包含一些操作（删除、编辑等）的表格。而且我需要在每个操作上添加一个工具提示。我没有使用 jquery，也不打算使用，也没有标题道具（我需要将此工具提示升级到某些特定数据甚至其他组件）。

所以问题是我无法正确定位工具提示（例如在顶部或底部的中间）。我的组件应该接收 Witch 参数以及如何使用 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

在最简单的情况下，工具提示应该绝对定位在定位元素内。

所以，在 ActionLinkItem 中添加 position: relative 样式 并在 Tooltip 的外部添加 `position: absolute 的样式。

为了增加功劳，您需要在工具提示上设置宽度，并使用 bottom: 100% 之类的样式将其定位或居中在 ActionLinkItem 中。

如果包含分别位于右侧或左侧，您还可以通过左右移动工具提示来确保工具提示不会跑出页面。