I'm trying to display some information only on hover to special div. I'm using material ui and their withStyles component. Is there a way to do that?
4
-
1Would a Tooltip cover your need? material-ui.com/components/tooltipsDavis Jones– Davis Jones2020-04-16 16:08:59 +00:00Commented Apr 16, 2020 at 16:08
-
1Related answer: stackoverflow.com/questions/57716926/…Ryan Cogswell– Ryan Cogswell2020-04-16 16:16:40 +00:00Commented Apr 16, 2020 at 16:16
-
@DavisJones Tooltip from material-ui is good solution, but I need a lot of customization in my case. Not sure that I could do it.Tatiana– Tatiana2020-04-16 16:26:30 +00:00Commented Apr 16, 2020 at 16:26
-
@RyanCogswell Thanks! It looks like an elegant solutionTatiana– Tatiana2020-04-16 16:30:59 +00:00Commented Apr 16, 2020 at 16:30
Add a comment
|
1 Answer
Please check this example:
import React, {useState} from "react";
export default function ShowButtonHover() {
const [style, setStyle] = useState({display: 'none'});
return (
<div className="App">
<h2>Hidden message in the box. Move mouse in the box</h2>
<div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}}
onMouseEnter={e => {
setStyle({display: 'block'});
}}
onMouseLeave={e => {
setStyle({display: 'none'})
}}
>
<div style={style}>This was hidden</div>
</div>
</div>
);
}
4 Comments
Tatiana
Thanks! I checked this example, it works. Although keep such style property in state seems a little bit overhead, it solves the problem.
Khabir
@Tatiana Thank you so much
Tatiana
But I still not sure that keep styles in component state is really right way :) Maybe I miss something
Khabir
As this is just an example, so if you have many styles then you write those styles in css class into a css file then you can use setClassName("your-css-class"). then I am sure you will be worried anymore.