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

最简单的是，工具提示应该绝对定位在定位元素中。

因此，在ActionLinkItem中添加;WITH cte AS (SELECT *, Grp = Row_number()OVER(partition BY number ORDER BY [From Date],[Sequency No_]) - [Sequency No_] FROM Yourtable) SELECT number, NAME, [From Date] = Min([From Date]), [To Date] = Max([To Date]) FROM cte GROUP BY number, NAME, Grp样式并在“工具提示”中添加“position：absolute”样式。

要获得额外的功劳，您需要在工具提示上设置宽度，并使用position: relative等样式在ActionLinkItem中定位或居中。

您还可以进行一些计算，以确保工具提示不会在页面上运行，如果包含的内容分别位于右侧或左侧，则左右移动。

表格单元格

1 个答案: