There are identical elements on the page. When you hover on any of them, a pop-up window should appear alongside. But the problem is that when you hover, the windows immediately pop up next to everyone, and nothing happens when you hover over some. How to deal with this, please tell me. (Assigning each id is not suitable).

$(function() { $('#info').hover( function($this){ $('.modalInfo').toggleClass('active');} ); }); 
 .modalInfo { display: none; } .info { display: block width: 50px; height: 20px; background: red; margin-right: 40px; } .modalInfo.active { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <i class = "info" id="info">INFO</i> <div class = "modalInfo"> <p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div> <i class = "info" id="info">INFO</i> <div class = "modalInfo"> <p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div> <i class = "info" id="info">INFO</i> <div class = "modalInfo"> <p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div> <i class = "info" id="info">INFO</i> <div class = "modalInfo"> <p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div>

  • Are you confused by the fact that several elements have the same id? - haswell
  • So there may be at least a thousand of them, I’ll not give each individual id. Maybe I misunderstand something ... - Vladyslav Tereshyn
  • Clearly do not understand. How should a language interpreter understand which block you are pointing the mouse to if they have the same id? Why multiple modalInfo blocks with the same content? - haswell
  • one
    classes are used to link a group of elements, not id - Alexey Shimansky

1 answer 1

Firstly, it is wrong to have several elements with the same id on one page. Secondly, why not render the HTML markup in data for convenience and in order not to produce a bunch of "modal windows"?

By decision: there is one element with id=modal - this is a modal window. When you hover on .info , we set up the top and left positions relative to the element on which we hover the mouse. Get data from the data-modal-text attribute, create #modal and insert data into it. When the mouse exits the element, we delete #modal .

 $('.info').hover( function() { let top = $(this).offset().top + $(this).height(); let left = $(this).offset().left; let data = $(this).data('modal-text'); let div = document.createElement('div'); div.id = 'modal'; $(div).css('top', top); $(div).css('left', left); $(div).html(data); $('body').append(div); }, function() { $('#modal').remove(); }); 
 .info { display: block width: 50px; height: 20px; background: red; margin-right: 40px; } #modal { width: 200px; border: solid 1px black; position: absolute; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <i class="info" data-modal-text="<p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p>">INFO</i> <i class="info" data-modal-text="<p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p>">INFO</i> <i class="info" data-modal-text="<p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p>">INFO</i> <i class="info" data-modal-text="<p>Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p>">INFO</i>

Or, if the HTML in these "modal windows" can be large, it will be more beautiful to present them as markup and provide the data-modal-id :

 $('.info').hover( function() { let top = $(this).offset().top + $(this).height(); let left = $(this).offset().left; let modalId = '#' + $(this).data('modal-id'); let data = $(modalId).html(); let div = document.createElement('div'); div.id = 'modal'; $(div).css('top', top); $(div).css('left', left); $(div).html(data); $('body').append(div); }, function() { $('#modal').remove(); }); 
 .info { display: block width: 50px; height: 20px; background: red; margin-right: 40px; } #modal { width: 200px; border: solid 1px black; position: absolute; } .modal-data { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <i class="info" data-modal-id="info1data">INFO</i> <i class="info" data-modal-id="info2data">INFO</i> <i class="info" data-modal-id="info3data">INFO</i> <i class="info" data-modal-id="info4data">INFO</i> <div id="info1data" class="modal-data"> <p>info1data: Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div> <div id="info2data" class="modal-data"> <p>info2data: Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div> <div id="info3data" class="modal-data"> <p>info3data: Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div> <div id="info4data" class="modal-data"> <p>info4data: Π”Π°Π²Π½ΠΎ выяснСно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ. тСкст ΠΌΠ΅ΡˆΠ°Π΅Ρ‚</p> </div>

Read:

  • Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ… Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницы Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ находится нСсколько элСмСнтов с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ id - in fact it can ....... this is not quite correct definition, kmk - Alexey Shimansky
  • @ Alexey Shimansky really, thank you, updated :) - MihailPw