Ciao, premetto che il tutto è risolvibile senza l'uso di JavaScript. In questo caso non ne vedo proprio la necessità. L'effetto hover puoi gestirlo tranquillamente da css.
Il problema sta comunque in quel z-index:-1;.
Di fatto, questo porta il tooltip praticamente sotto il body, che lo "copre" inibendo gli eventi mouse.
Non chiedermi perché accade questo, ma se provi ad azzerare le dimensioni del body, il tutto funziona.
codice:
body{
width: 0;
height: 0;
background: green;
}
A prescindere da questo, io risolverei diversamente, usando solo css, e incapsulando il tooltip dentro un ulteriore div con overflow:hidden. Inoltre userei delle classi, piuttosto che degli id, in modo da rendere il sistema riutilizzabile per eventuali altre istanze sulla stessa pagina, cosa che non puoi fare se usi degli id. Farei anche qualche altro aggiustamento...
Ti posto un esempio da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
body{
background: green;
}
.trigger{
width: 300px;
height: 300px;
position: relative;
background: blue;
}
.trigger>.tooltip{
position: absolute;
top: 50px;
right: 0;
width: 0;
overflow: hidden;
}
.trigger>.tooltip>div{
padding: 10px;
width: 100px;
text-align: center;
background: rgba(255,255,255, .7);
color: black;
float: right;
border-radius: 0 10px 10px 0;
}
.trigger>.tooltip,.trigger>.tooltip>div{
transition: all .4s ease;
}
.trigger:hover>.tooltip{
right: -100px;
width: 100px;
}
</style>
</head>
<body>
<div class="trigger">
Elemento padre ("trigger")
<div class="tooltip"><div>tooltip <br><a href="#">Link here</a></div></div>
</div>
<br>
<div class="trigger">
Altro Elemento trigger
<div class="tooltip"><div>tooltip blablabla<br><a href="#">altro link</a></div></div>
</div>
</body>
</html>
Rispondi quotando
