Сделать всплывающее окно с интеллектуальным позиционированием

Question

Я работаю над куском устаревшего кода для стола. В некоторых ячейках я добавляю значок уведомления. Когда вы наводите курсор на значок, отображается <span>, отображающий некоторую информацию. Я бы хотел, чтобы этот <span> был умным относительно его позиционирования, но не может найти хороший метод. Я могу статически позиционировать его, но в зависимости от того, какая ячейка в таблице, в которой он находится, теряется на краю страницы. Я сделал JsFiddle here, демонстрируя проблему. К сожалению, мне не разрешено использовать ничего, кроме HTML, CSS и vanilla JS.

Атрибут title для большинства тегов довольно умен в отношении его положения. Я добавил заголовок в одну из ячеек в таблице в jsFiddle (ячейка, содержащая «Hello»). Есть ли способ сделать мой пролет таким же умным поведением?

Answer 1

Перед любым элементом можно добавить всплывающее окно, поместив pop-html-код внутри «div» в «position: absolute; Переполнение: видимый; ширина: 0; высота: 0' .

Когда эти события: 'onmouseenter', 'onmouseleave' запущены на элементе, просто переключите атрибут popsc css 'display' между 'none' и 'block' элемента.

Пример на jsfiddle: https://jsfiddle.net/johnlowvale/mfLhw266/

HTML и JS:

<div class="popup-holder"> 
    <div class="popup" id="popup-box">Some content</div> 
</div> 
<a href="javascript:" onmouseenter="show_popup()" onmouseleave="hide_popup()">Some link</a> 

<script> 
    function show_popup() { 
    var e = $("#popup-box"); 
    e.css("display", "block"); 
    } 

    function hide_popup() { 
    var e = $("#popup-box"); 
    e.css("display", "none"); 
    } 

</script> 

CSS:

.popup-holder { 
    position: absolute; 
    overflow: visible; 
    width: 0; 
    height: 0; 
} 

.popup { 
    background-color: white; 
    border: 1px solid black; 
    padding: 10px; 
    border-radius: 10px; 
    position: relative; 
    top: 20px; 
    width: 300px; 
    display: none; 
}