<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Codigo La Web del Programador - http://www.lawebdelprogramador.com</title>
<style>
/* Estilo que muestra la capa flotante */
#flotante
{
position: absolute;
display:none;
font-family:Arial;
font-size:0.8em;
width:280px;
border:1px solid #808080;
background-color:#f1f1f1;
padding:5px;
}
.estiloEjemplo {
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<!-- En este div se mostrar la capa emergente -->
<div id="flotante"></div>
<p>
<span class='mostrarCapa' data-capa="Este codigo funciona<br>con todos los navegador<br>excepto IE">Información</span>
</p>
<p>
<span class='mostrarCapa' data-capa="Texto con formato <b>html</b>">Pon el raton encima para ver la capa</span>
</p>
<p>
<span class='mostrarCapa' data-capa="Este texto largo muestra como se va ajustando a la anchura de la capa. Puedes añadir código html y <span class='estiloEjemplo'>estilos</span>">Pon el raton encima para ver la capa</span>
</p>
</body>
</html>
<script>
/**
* Funcion que muestra el div en la posicion del mouse
*
* @param event
* @param text - texto a mostrar en la capa
*/
function showdiv(event,text)
{
//determina un margen de pixels del div al raton
margin=5;
document.captureEvents(Event.MOUSEMOVE);
let tempX = event.pageX;
let tempY = event.pageY;
if (tempX < 0){tempX = 0;}
if (tempY < 0){tempY = 0;}
// Modificamos el contenido de la capa
const capa=document.getElementById('flotante');
capa.innerHTML=text;
// Posicionamos la capa flotante
capa.style.top = (tempY+margin)+"px";
capa.style.left = (tempX+margin)+"px";
capa.style.display='block';
}
// Generamos un evento para cada elemento que tenga el la clase CSS "mostrarCapa"
const lugaresDondeMostrarLaCapa=document.querySelectorAll(".mostrarCapa");
for(lugar of lugaresDondeMostrarLaCapa) {
lugar.addEventListener("mouseover",function() {
// obtenemos la descripción a mostrar del data-capa si existe
if(this.dataset.capa) {
showdiv(event, this.dataset.capa);
}
});
lugar.addEventListener("mouseout",() => {
document.getElementById('flotante').style.display='none';
});
}
</script>
Se ha eliminado el control para las versiones de IE