'CSS 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. VSCode on hover

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

Sketch how the infoBox should behave

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.

javascripthtmlcssflexboxstyled-components


Solution 1:[1]

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>

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 FortyGazelle700
Solution 2 Adeel

Related Questions