0
194
ViewsCSS Display InfoBox on hovering over <span> Element
I want to implement a functionality in my React app where you hover over a <span> element and then an InfoBox appears over the <span> element.
It should look like in Visual Studio code when you hover your cursor over a variable for example.
The box should behave as in the following sketch I drew (basically it's the same behavior as in VSCode): The InfoBox is the box that contains This text. The <span> contains the hello
Unfortunately I'm not an expert in CSS and I don't even know if this is possible with CSS only or if you have to use javascript as well.
·
Juan Pablo Isaza
2 answers
Answer question0
This might help:
.thisText{
position:relative;
top: 20px;
}
.thisText > .hello{
display: none;
}
.thisText:hover> .hello {
display: block;
position:absolute;
top:-20px;
}
<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
·
Juan Pablo Isaza
Report
0
Is this what you are looking for?
Where you hover over some text and text below it appears?
.thisText > .hello {
display: none;
}
.thisText:hover > .hello {
display: block;
}<span class="thisText">
This Text
<span class="hello">
Hello
</span>
</span>
·
Juan Pablo Isaza
Report
Answer question