DenM,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<p><button id="coords-show-mark">Кнопка с id=«coords-show-mark», сообщение появится под ней</button></p>
<script>
let elem = document.getElementById("coords-show-mark");
function createMessageUnder(elem, html, delay) {
// создаём элемент, который будет содержать сообщение
let message = document.createElement('div');
// для стилей лучше было бы использовать css-класс здесь
message.style.cssText = "position:absolute; color: red";
message.innerHTML = html;
let timer;
return () => {
window.clearTimeout(timer);
let coords = elem.getBoundingClientRect();
// устанавливаем координаты элементу, не забываем про "px"!
message.style.left = coords.left + "px";
message.style.top = coords.bottom + "px";
document.body.append(message);
timer = setTimeout(() => message.remove(), delay);
}
}
// Использование:
// добавим сообщение на страницу на 5 секунд
elem.addEventListener('click', createMessageUnder(elem, 'Hello, world!', 5000));
</script>
</body>
</html>