Позиционировать сообщение относительно курсора.

[Ubivectel]

Hello, world!

Имеем элемент .K_copy при клике на который копируется содержимое дива. Добавил код который выводит сообщение "скопировано" вот скрипт:

$("#K_copy").show(400, function () {
            setTimeout(function () {
                $("#K_copy").hide(300);
            }, 800);
        });

Единственное чего не хватает для счастья, что бы сообщение выводилось рядом с курсором или точнее в том месте где был клик, сейчас пришлось задать абсолютное позиционирование, но как-то это не по феншую

[ksa]

Ubivectel, оно?
https://ru.stackoverflow.com/questio...урсором

[Ubivectel]

Оно самое, только хоть убей пока не пойму как и куда это вписать, синтаксис мое очень слабое место )))

[ksa]

только хоть убей пока не пойму как и куда это вписать

В обработку клика...
Там есть событие мыши - можно узнать координаты курсора. Далее создается элемент, вставляется в нужного родителя, позиционируется по тем координатам и в него выводится нужное содержимое.

[рони]

в том месте где был клик,

https://javascript.ru/forum/events/6...tml#post447668

[Ubivectel]

На исходе второй день мозголомки, хоть убей не получается корректно вписать ни первый ни второй пример, либо ломаю код, либо не работает, если я правильно понял это:

if (e.pageX + hint.offsetWidth < document.body.offsetWidth) {
    hint.style.top = e.pageY + 10 + 'px';
    hint.style.left = e.pageX + 10 + 'px';
} else {
    hint.style.top = e.pageY + 10 + 'px';
    hint.style.left = e.pageX - hint.offsetWidth - 10 + 'px';
}

Нужно как-то вписать вот в это:

document.addEventListener("click", ({ target }) => {
    if (target = target.closest('.K_copy')) {
        target = target.closest('.KIDE_msg_top')
        let clon = target.cloneNode(true);
        clon.querySelectorAll(".KIDE_quote").forEach(el => el.remove()); 
        let text = clon.textContent; 
        navigator.clipboard.writeText(text);

        $("#K_copy").show(400, function () {

            setTimeout(function () {
                $("#K_copy").hide(300);
            }, 800);
        });
    }
});

Как только не перепробовал, очень хотелось справиться самому

[рони]

Ubivectel,
сделайте минимальный макет или ждите телепатов.

[Ubivectel]

Понял, вот кнопочка:

<i class="fa fa-clipboard K_copy" title="Копировать" aria-hidden="true"></i>

Вот то что она копирует, хотя это наверное не нужно:

<div id="KIDE_id_526841" class="KIDE_msg_top"><span class="KIDE_msg_hour"> 19:11 -</span> <span style="cursor: pointer" title="18-1 19:11:07" oncontextmenu="event.preventDefault();kide.mensaje('nikname',0,526841,'','18-1 19:11:07','4f0cd4f2e29c3de4a13ef858f2e0b7e0',3,'http://www.gravatar.com/avatar/438c755fdaef894d49d469da93a7e479?s=50&amp;d=wavatar')" class="KIDE_guest"><span style="cursor: pointer" title="18-1 19:11:07" onclick="kide.insertSmile('Оляпка_4454, ')" class="KIDE_guest">hikname</span>: <span class="KIDE_dc_guest KIDE_msg"> Текст сообщения </span>
</span></div>

Вот HTML самого сообщения:

<noindex class="K-copy">
    <div id="K_copy" style="display: none;">
        Скопировано!
    </div>
</noindex>

[voraa]

 navigator.clipboard.writeText(text);

На http работать не будет.

[Ubivectel]

На http работать не будет.

На https работает )))