Im currently using React and rendering a span whenever a user hovers over the text element. The issue is that the existing text will shift leftwards(span will appear right of the text), whenever the span appears. Expected behavior is for the span to just appear on right of the text without shifting the text. Is there any way I can do this with css? Please see below for code:
<TableCell
classes={{ root: classes.tableCell }}
onMouseEnter={() => this.handleMouseEnter(index)}
onMouseLeave={() => this.handleMouseLeave(index)}
align="center">
Hello
{(isHovering) && <span>{this.getTitle(movie.title)} />}
</TableCell>
It looks like you're missing the closing tag of your span.
Try this:
<TableCell
classes={{ root: classes.tableCell }}
onMouseEnter={() => this.handleMouseEnter(index)}
onMouseLeave={() => this.handleMouseLeave(index)}
align="center">
Hello
{(isHovering) && <span>{this.getTitle(movie.title)} </span>}
</TableCell>