Problema:Cuando se presione el botón del mouse sobre un párrafo, mostrar un div a 10 píxeles más abajo y 10 píxeles a la derecha con un mensaje de ayuda.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body id="cuerpo">
<p onclick="presionado(event)">Presione el párrafo con el mouse.</p>
<div id="ayuda">
Ayuda.
</div>
<script src="funciones.js"></script>
</body>
</html>
#ayuda {
color: #aa0;
background-color: #ff0;
position: absolute;
text-align: center;
left: 40px;
top: 30px;
width: 100px;
height: 40px;
display: none;
}
function presionado(e) {
let obj = document.getElementById('ayuda')
obj.style.display = 'block'
obj.style.left = e.clientX + 10 + 'px'
obj.style.top = e.clientY + 10 + 'px'
}