Tooltip positioning in table cell

Question

I'm using React and have a table with some actions (delete, edit, etc.) in the cell. And I need to put a tooltip on each action. I'm not using the jquery and don't plan to, and not title props (I will need to upgrade this tooltip to some specific data or even another component).

So the problem is I can't position the tooltip correctly (for example in the middle of the top or bottom). Witch params should my component receive and how to do it with 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

At its simplest, tooltip should be absolutely positioned within a positioned element.

So, add a style of position: relative to the in ActionLinkItem and add a style of `position: absolute to the outer in Tooltip.

For added credit, you will want to set a width on your tooltip, and position or center it within the of ActionLinkItem using styles like bottom: 100% .

You can also do some calculations to ensure that your tooltip does not run off the page by moving it left and right if the containing is on the right or left respectively.