• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

3uphoria

Tooltips Utilizando qTip

3 mensagens neste tópico

Boas, neste momento preciso de fazer uma tooltip. depois de pesquisar gostei do que vi sobre o qTip, que funciona sobre jquery, framework que vou utilizar para as restantes funcionalidades do site.

http://craigsworks.com/projects/qtip

Já dei inúmeras voltas a isto e não estou a fazer mesmo as cenas bem, pois não consigo colocar a funcionar uma tooltip bem formatada.

Neste momento a única coisa que o código faz é mostrar uma tooltip que não está correctamente formatada, em que não percebo o porquê de tal acontecer. Além disso supostamente o conteudo dela deveria ser "Já está" e apenas aparece "teste".

<html>
<head>
<title>exemplo de tooltip
</title>
<script type="text/javascript" src="/projects/qtip/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/projects/qtip/js/jquery.qtip-1.0.0-rc3.min.js"></script> 

<script>

$('p[teste]').qtip({
   content: 'já esta',
   style: { 
      width: 200,
      padding: 5,
      background: '#A2D959',
      color: 'blue',
      textAlign: 'center',
      border: {
         width: 7,
         radius: 5,
         color: '#A2D959'
      },
      tip: 'bottomLeft',
      name: 'dark' 
   }
});


</script>


<style type="text/css">
p {
color:green
}
</style>

</head>
<body>

<p title="teste">exemplo de tooltip</p>

</body>
</html>

Se alguém tiver umas luzes disto ou já tenha realizados tooltips com o qTip, que me dê umas luzes sff.  :wallbash:

Obrigado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas,

Tens o código numa tag script sem especificares o type.

Não inicias o jquery como deve ser (ver documentação no site).

Trocar :

$('p[teste]').qtip({

Por :

$('p[title="teste"]').qtip({

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado yoda.pt pela ajuda, realmente tinhas razão sobre estar mal declarado os documentos em javascript, neste caso a framework. Eu até tinha bem, mas isto às vezes é por tentativa erro...  :bye2:

Mas da maneira como disseste, pelo menos neste caso especifico não consegui resolver a situação dessa forma. Pelo que percebi a maneira correcta é de chamar pelo id

$('#teste').qtip({

ou então através da classe

$('.a').qtip({

Sempre aprendi umas coisas...  :cheesygrin:

Aqui fica um exemplo completo de tooltip com o uso de jQuery e qTip a funcionar sem problemas:

(Atenção à localização dos ficheiros javascript, pois podem não coincidir com este caso especifico)

<html>
<head>
<title>exemplo de tooltip</title>

<!-- Declaração do Jquery e do qTip -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>

<!-- Tooltip -->
<script type="text/javascript">

$(document).ready(function(){

$('#teste').qtip({
   content: {
            text: 'Exemplo de Tooltip com Jquery e qTip',
           
            title: {
               text: 'Jquery | qTip',
               button: 'Close' 
            }
         },
   
   show: { 
            when: 'click',  // Activada quando se clica
            solo: true    // Só mostra uma tooltip de cada vez
         },
   hide: 'unfocus',

style: {
            tip: true, 
            border: {
               width: 0,
               radius: 4
            },
            name: 'light', 
            width: 570 
         }

});

});
</script>

<!-- Estilo -->
<style type="text/css">
a { color:green }
</style>

</head>
<body>

<a id="teste">exemplo de tooltip</a>

</body>
</html>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora