Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Célio A.

Abrir uma janelinha com qtip

Por , em Javascript

Recommended Posts

Célio A.    4

Célio A.
Postado

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>
// Create the tooltips only when document ready
 $(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 abrir uma janela ao passaro mouse</a>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

"NetworkError: 503 Service Temporarily Unavailable - http://www.akonp.org/qtip/script/jquery.imagesloaded.pkg.min.js"

Verifique os caminhos dos seus scripts.

E essa tua versão do jQuery é muito antiga.. atualize.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito