Search code examples
javascripthtmlcssflexboxstyled-components

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.

Solution

  • I was looking into similar things so figured I might share what I ended up with.

    If you go to Help > Toggle Developer Tools it opens up the Dev Tools just like in Chrome on the side. Seems like most Electron based apps have this (although Ctrl+Shift+I—I'm on Windows—didn't work for me on VS Code somehow. Needed to open it via mouse through the aforementioned method).

    With the Dev Tools you can then view what HTML, JavaScript, and CSS is used to make the displayed UI possible. I opened up the console tab at the bottom so that I can type on it while I use my mouse to hover on things, then I entered debugger command in the console to pause the JS execution or something (don't quote me on this). Point is it pauses the state of everything so you can then keep the tooltip that is created with JavaScript in display.

    Seems like it's just standard Tooltip positioning with display: block and position: fixed, as well as max-width, top and left set by calculated JavaScript. There's also a z-index rule set by a class selector but that's on the stylesheet.

    element.style {
    position: fixed;
    display: block;
    visibility: inherit;
    max-width: 1152px;
    top: 85px;
    left: 147px;
}

    Personally I would use position: absolute instead of fixed. I would guess they used fixed in Visual Studio Code instead because of the way they calculated the position inside each "split view" (the windows), because the overridden CSS stylesheet did use position: absolute as seen here.

    .monaco-hover {
    cursor: default;
    position: absolute;
    overflow: hidden;
    z-index: 50;
    user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    box-sizing: initial;
    animation: fadein .1s linear;
    line-height: 1.5em;
}

    I recognize this doesn't fully answer the question (nothing on how to get or set the dimensions) but I know where I need to go myself from here on, and for those answers I think you can go looking for answers elsewhere depending on if you're writing vanilla JS, or using some framework (in which case there might be an easier way to get, calculate, and set those things).