Cell Tooltip - Focus Issues #1392
Conversation
|
|
||
| const tooltip = this.props.tooltip ? (<span className="cell-tooltip-text">{this.props.tooltip}</span>) : null; | ||
|
|
||
| const classes = joinClasses('react-grid-Cell__value', |
There was a problem hiding this comment.
I think we need to move the tooltip outside the grid otherwise there will be issues similar to editors. Currently if the cell has tooltip then a new div is rendered and positioned. I propose the following solution instead
return (
<div
{...this.getKnownDivProps()}
className={className}
style={style}
{...events}
ref={this.setCellRef}
>
{cellActionButtons}
{cellExpander}
{ tooltip ? (<TooltipTrigger placement="left" overlay={tooltip}> {cellContent}<TooltipTrigger > : cellContent }
</div>
);
TooltipTrigger can render the tooltip in a portal and position it
There was a problem hiding this comment.
I thought of doing something along these lines as i too agree the tooltip should be rendered outside the cell.
My biggest reservation about going down this would is around having to attach a onMouseOver/Out event to each cell to trigger the showing and hiding of the tooltip, and as a result was concerned about its performance.
Also although we have tooltip components in AdazzleUI and one-strata-ui we cannot utilize them in this repository, so i would have to build one and I think having three different tooltip components can become unmaintainable
| and to avoid having the tooltip hide under the cell in | ||
| the next row we need to up the z-index of the cell being hovered. | ||
| */ | ||
| z-index: 101; |
There was a problem hiding this comment.
We can get rid of zIndex related code if we use the above mentioned solution
Fix issues between cell action and cell tooltips whereby when trying to click on a cell-action the tooltip will show making it very difficult to select the options.
Remove un-referenced editors.
Clean up Frozen column code to get rid of z-index css.