Как вывести блок по клику рядом с курсором?

Question

[Grigory1994]

Кто может подсказать как вывести блок с данными из html атрибута по клику, рядом с курсором?
Я не силен в js, этот скрипт не выводит блок нигде.

$('path').click(
		function(){
			$('.description').html($(this).attr('data-description'));
			$('.description').fadeIn(50);
		},
		function(){
			$('.description').fadeOut(50);
		}
	);

Comments

[Grigory1994]

Можно закрывать, на другом ресурсе помогли решить вопрос)
Вот такой скрипт идеально работает в моем случае
(function(){

var hint = document.createElement('div');
hint.className = "description";
document.body.appendChild(hint);

var path = document.getElementsByTagName('path');
var i;
for( i = 0; i < path.length; i++ ){
path[i].addEventListener('click', function(e){
hint.innerHTML = this.dataset.description;
hint.style.display = 'block';
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', function(e){
if( e.target.tagName.match("path") || hint.contains(e.target) ){ return; }
hint.style.display = 'none';
});

})();

Answer 1

[toha_man]

Ваш код все что делает так это заполняет атрибутами html элементов с классом description и отображает его. А вот позиционирование никак не завязано в коде к курсору.
Вам надо по клику передавать объект event, а далее получать координаты курсора мыши на экране и присваивать их блоку description через свойства left top и абсолютное позиционирование
Гуглите event для события click и в нем координаты clientx clienty
Или прочтите эту замечательную статью Ильи Картера , разберетесь https://learn.javascript.ru/obtaining-event-object

Comments

[Grigory1994]

Спасибо, очень интересная статья!