Pop-up on word hover

Question

I want to display a pop-up with text whenever I hover on orange text but I'm struggling with two different situations with the code I wrote:

1) The pop-up's are already showing when you land on the page. If I try display: none on the "popup" class, they will never show.

2) I want them to be relative to the word, not to the whole paragraph, but I dont know how to stablish position: relative on the "choose" class as It's a span tag and It doesn't seem to allow that.

 function showPopupAmplitud() { const popup = document.getElementById('popup_amplitud'); popup.style.display = ""; } function hidePopupAmplitud() { const popup = document.getElementById('popup_amplitud'); popup.style.display = "none"; } function showPopupDAW() { const popup = document.getElementById('popup_daw'); popup.style.display = ""; } function hidePopupDAW() { const popup = document.getElementById('popup_daw'); popup.style.display = "none"; }

 * { box-sizing: border-box; margin: 0; padding: 0; } .text { margin-left: 20%; margin-right: 42%; text-align: justify; } .popup_container { position: relative; } .choose { color: #FFAC3E; font-weight: bold; } .popup { padding: 0px 15px 25px 15px; background-color: white; box-shadow: 1.5px 1.5px 25px rgba(0, 0, 0, 0.3); color: #6A6A6A; position: absolute; width: 50%; top: 30px; font-size: 16px; line-height: 22.7px; } .popup p { margin-left: 4%; margin-right: 4%; padding-top: 20px; }

 <div class="text"> <article> <div class="popup_container"> Nuestro objetivo es que la <span class="choose" onmouseover="showPopupAmplitud()" onmouseout="hidePopupAmplitud()">amplitud</span> de la señal proporcionada por el sintetizador disminuya algunos decibeles cada vez que suene el redoblante. Lo que hacemos es asignar un compresor al canal del sintetizador, y mediante el routeo entre ambos canales, activar la opción de Sidechain que tal compresor nos proporciona (no todos los compresores poseen la alternativa de ser utilizados como Sidechain).</br> </br> <div class="popup" id="popup_amplitud"> <p>La amplitud de un movimiento oscilatorio, ondulatorio o señal electromagnética es una medida de la variación máxima del desplazamiento u otra magnitud física que varía periódica o cuasiperiódicamente en el tiempo. Es la distancia entre el punto más alejado de una onda y el punto de equilibrio o medio.</p> </div> </div> <div class="popup_container"> En la seccion Mixer del <span class="choose" onmouseover="showPopupDAW()" onmouseout="hidePopupDAW()">DAW</span> a utilizar, se deberá routear el canal que posee asignado el Trigger al canal de la señal a afectar (en el caso de ser FL Studio como se muestra en la imagen, se hace click derecho en la flecha inferior ya continuacion “Sidechain to this track”, lo cual generará un enlace entre ambos canales).</br> </br> <div class="popup" id="popup_daw"> <p>Una estación de trabajo de audio digital (EAD) o DAW por sus siglas en inglés (Digital Audio Workstation) es un sistema electrónico dedicado a la grabación y edición de audio digital por medio de un software de edición de audio.</p> </div> </div> </article> </div>

Answer 1

No need for JavaScript here as the :hover pseudo selector will work perfectly in CSS. When hovering your .choose element select the .popup element with the sibling selector ( ~ ) and set the desired state.

Like this:

.choose:hover ~ .popup { 
  ...
}

However, I'd suggest changing up your HTML structure. Turn .popup element into a <span> and place it inside the .choose span element. This way you can position your popup relatively to the position of the .choose element. And you don't have to use the sibling selector now that .popup is a child of .choose .

Position your popup with both the left and transform properties to place them right below the word that has been hovered.

See the example below.

 * { box-sizing: border-box; margin: 0; padding: 0; } .text { margin-left: 20%; margin-right: 42%; text-align: justify; } .popup_container { position: relative; } .choose { position: relative; color: #FFAC3E; font-weight: bold; } .popup { display: none; padding: 15px 15px 25px 15px; background-color: white; box-shadow: 1.5px 1.5px 25px rgba(0, 0, 0, 0.3); background-color: #ffffff; color: #6A6A6A; position: absolute; width: fit-content; left: 50%; top: 30px; font-size: 16px; font-weight: normal; line-height: 22.7px; z-index: 1; transform: translate(-50%, 0); } .choose:hover .popup, .popup:hover { display: block; } .popup p { margin-left: 4%; margin-right: 4%; padding-top: 20px; }

 <div class="text"> <article> <div class="popup_container"> <p> Nuestro objetivo es que la <span class="choose">amplitud <span class="popup" id="popup_amplitud"> La amplitud de un movimiento oscilatorio, ondulatorio o señal electromagnética es una medida de la variación máxima del desplazamiento u otra magnitud física que varía periódica o cuasiperiódicamente en el tiempo. Es la distancia entre el punto más alejado de una onda y el punto de equilibrio o medio. </span> </span> de la señal proporcionada por el sintetizador disminuya algunos decibeles cada vez que suene el redoblante. Lo que hacemos es asignar un compresor al canal del sintetizador, y mediante el routeo entre ambos canales, activar la opción de Sidechain que tal compresor nos proporciona (no todos los compresores poseen la alternativa de ser utilizados como Sidechain).</p> </div> <div class="popup_container"> <p> En la seccion Mixer del <span class="choose">DAW<span class="popup" id="popup_daw"> Una estación de trabajo de audio digital (EAD) o DAW por sus siglas en inglés (Digital Audio Workstation) es un sistema electrónico dedicado a la grabación y edición de audio digital por medio de un software de edición de audio. </span></span> a utilizar, se deberá routear el canal que posee asignado el Trigger al canal de la señal a afectar (en el caso de ser FL Studio como se muestra en la imagen, se hace click derecho en la flecha inferior ya continuacion “Sidechain to this track”, lo cual generará un enlace entre ambos canales). </p> </div> </article> </div>

Answer 2

For question 1 Use this:

    .popup_container{display:none;}

    .choose:hover + .popup_container {position:relative;display:auto;}

For question 2:

You need to declare the position of the .choose item, put the .popup_container within the .choose div, and then position it accordingly.

Answer 3

So what i changed the code a bit and i attached the onmouseover and onmouseout listeners to draw and amplitud . Initiallly i set the popup dispay to none and on mouseover set it empty string. Also i applied z-index to the popup class so that the popup is above the text everytime

 $(document).ready(function() { // DOM Elements const draw = document.getElementById("draw"); const popupdraw = document.getElementById("popup_daw"); const amplitud = document.getElementById("amplitud"); const popupamplitud = document.getElementById("popup_amplitud"); // Event Listeners amplitud.onmouseover = function() { popupamplitud.style.display = ""; }; amplitud.onmouseout = function() { popupamplitud.style.display = "none"; }; draw.onmouseover = function() { popupdraw.style.display = ""; }; draw.onmouseout = function() { popupdraw.style.display = "none"; }; });

 * { box-sizing: border-box; margin: 0; padding: 0; } .text { margin-left: 20%; margin-right: 42%; text-align: justify; } .popup_container { position: relative; } .choose { color: #ffac3e; font-weight: bold; } .popup { padding-top:15px; background-color: white; box-shadow: 1.5px 1.5px 25px rgba(0, 0, 0, 0.3); color: #6a6a6a; position: absolute; width: 50%; top: 30px; left:50%; font-size: 16px; line-height: 22.7px; z-index: 400; display:inline-block; vertical-align:top; } .popup p { margin-left: 4%; margin-right: 4%; padding-top: 20px; }

 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./index.css" /> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="text"> <article> <div class="popup_container"> Nuestro objetivo es que la <span class="choose" id="amplitud">amplitud</span> de la señal proporcionada por el sintetizador disminuya algunos decibeles cada vez que suene el redoblante. Lo que hacemos es asignar un compresor al canal del sintetizador, y mediante el routeo entre ambos canales, activar la opción de Sidechain que tal compresor nos proporciona (no todos los compresores poseen la alternativa de ser utilizados como Sidechain).</br> </br> <div class="popup" id="popup_amplitud" style="display:none"> <p>La amplitud de un movimiento oscilatorio, ondulatorio o señal electromagnética es una medida de la variación máxima del desplazamiento u otra magnitud física que varía periódica o cuasiperiódicamente en el tiempo. Es la distancia entre el punto más alejado de una onda y el punto de equilibrio o medio.</p> </div> </div> <div class="popup_container"> En la seccion Mixer del <span class="choose" id="draw">DAW</span> a utilizar, se deberá routear el canal que posee asignado el Trigger al canal de la señal a afectar (en el caso de ser FL Studio como se muestra en la imagen, se hace click derecho en la flecha inferior ya continuacion “Sidechain to this track”, lo cual generará un enlace entre ambos canales).</br> <br/> <div class="popup" id="popup_daw" style="display:none"> <p>Una estación de trabajo de audio digital (EAD) o DAW por sus siglas en inglés (Digital Audio Workstation) es un sistema electrónico dedicado a la grabación y edición de audio digital por medio de un software de edición de audio.</p> </div> </div> </article> </div> <script src="./index.js"></script> </body> </html>

Answer 4

To hover work you have to add ":hover" in front of the prop you want to hover with in css. More on : https://www.w3schools.com/cssref/sel_hover.asp See how that works for you and if the relative position needs any change.