Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tenho uma pagina que exibe uma lista de atletas. Estou usando tooltip para exibir algumas informações do atleta ao passar o mouse, Porem é apenas uma janelinha com texto que some ao tirar o mouse.
Estou tentando implementar um código para abrir uma janelinha com informações, foto e link e que quanto aberta seja possível interagir com o mouse(clicando no link por exemplo) algo parecido com o iframe
Me sugeriram o qtip http://qtip2.com/demos e estou estudando o modelo AJAX'd HTML.
Devo estar fazendo algo bobo, não estou obtendo o resultado. Ao passar o mouse nada acontece
Minha pagina teste: http://www.akonp.org/qtip/
Scripts: http://www.akonp.org/qtip/script/
<html>
<head>
<title>My site</title>
<link type="text/css" rel="stylesheet" href="script/jquery.qtip.css" />
</head>
<body>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.qtip.js"></script>
<script type="text/javascript" src="script/jquery.imagesloaded.pkg.min.js"></script>
<script> $(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: function(event, api) {
$.ajax({
url: api.elements.target.attr('href') // Use href attribute as URL
})
.then(function(content) {
// Set the tooltip content upon successful retrieval
api.set('content.text', content);
}, function(xhr, status, error) {
// Upon failure... set the tooltip content to error
api.set('content.text', status + ': ' + error);
});
return 'Loading...'; // Set some initial text
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
</script>
<a href='[http://qtip2.com/demos/data/owl'>Deve](http://qtip2.com/demos/data/owl) abrir uma janela ao passaro mouse</a>
</body>
</html>Carregando comentários...