工具提示在表格單元格中的位置

Question

我正在使用React，並且在單元格中有一個表，其中包含一些操作（刪除，編輯等）。 我需要在每個操作上添加工具提示。 我沒有使用jquery，也沒有計划，也沒有標題道具（我需要將此工具提示升級到某些特定數據甚至其他組件）。

所以問題是我無法正確放置工具提示（例如，在頂部或底部的中間）。 我的組件應該接收女巫參數，以及如何使用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對於position: relative樣式，並在工具提示中添加position: relative對於外部的`position：absolute樣式。

為了增加功勞，您將需要在工具提示上設置寬度，並使用bottom: 100%類的樣式將其定位或居中在ActionLinkItem中。

您還可以進行一些計算以確保您的工具提示不會在頁面上運行，如果包含內容分別位於右側或左側，請向左和向右移動工具提示。