Criando Tooltip com jQuery

Nessa vídeo aula vamos aprender a como criar um efeito Tooltip com jQuery, que é um balão de contexto, que usado para informar detalhes de determinado conteúdo, podendo ser expandido para outras funcionalidade. Espero que gostem, e boa aula.

Código da Vídeo Aula :

index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
       <title>ToolTip</title>
       <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
       <script type="text/javascript" src="js/tooltip.js"></script>
    </head>
    <body>
       <div style="height:100px"></div>
       <a href="#" rel="tooltip" title="Texto de Exemplo do Efeito">Link de Exemplo</a>
          
    </body>
    </html>

css/style.css

    .tooltip{
       position:absolute;
       display:none;
       padding: 10px 30px;
       background:#000;
       color:#fff;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        border-radius:5px;
    }

js/tooltip.js (modifiquei para não aparecer o valor title no navegador)

<br />
    $(function(){</p>
<p>       $(&quot;*[rel=tooltip]&quot;).hover(function(e){<br />
             var title = $(this).attr('title');<br />
             $(this).data('titleText', title).removeAttr('title');<br />
             $(&quot;body&quot;).append('&lt;div class=&quot;tooltip&quot;&gt;'+title+'&lt;/div&gt;');</p>
<p>             $('.tooltip').css({<br />
                         top : e.pageY - 50,<br />
                         left : e.pageX + 20<br />
                         }).fadeIn();</p>
<p>       }, function(){<br />
          $(this).attr('title', $(this).data('titleText'));<br />
          $('.tooltip').remove();<br />
       }).mousemove(function(e){<br />
          $('.tooltip').css({<br />
                         top : e.pageY - 50,<br />
                         left : e.pageX + 20<br />
                         })<br />
       })</p>
<p>    });</p>
<p>

20 thoughts on “Criando Tooltip com jQuery

  1. Muito boa vídeo aula DAVID!! Parabéns!!
    Eu consegui fazer o que você ensinou, mas estou com um problema:
    Além de aparecer o tooltip da vídeo-aula, aparece também e, ao mesmo tempo, o tooltip padrão do navegador.
    Como resolvo isso?

  2. olá, em primeiro momento gostaria de elogiar sua didatica em seguida gostaria de saber como faço pra esse tooltip surgir sempre no mesmo lugar, e como poderia fazer ele carregar o conteudo de uma div inteira.

  3. Muito bom tutorial ! Continue fazendo ..
    Consegui fazer com facilidade ! ;]
    Tem como fazer um tutorial de como o usuário curtir minha página do facebook, pelo meu site ?
    Quero aprender sem ser pelo WP ..

    abç !

  4. Muito bom tudo que voce posta, muito util.
    Como poderia fazer um tooltip no html abaixo: ja tenho o css montado.


    DVDRip

    De Pernas Pro Ar –()
    Genero:Comédia
    Sinopse:Alice (Ingrid Guimarães) já passou dos 30, é casada com João (Bruno Garcia), tem um filho e é uma executiva bem sucedida. Na verdade, ela é uma típica workaholic, que tenta se equilibrar entre a rotina de trabalho e a família, mas perde o emprego e o marido no mesmo dia. É quando ela passa a contar com a ajuda da vizinha Marcela (Maria Paula)…

  5. Oi David, beleza?
    É o seguinte em um monte de projeto meu mas a um tempo atrás um cliente meu reclamou que se o texto contendo tooltip estiver colado na borda lateral da tela, ele atrapalha no clique se for um link, então desde este tempo tenho procurado uma forma de adaptar neste seu script um código que o tooltip detecte a borda e se mova para o lado oposto fazendo assim o balão tooltip não deformar e deixando a área pra o click livre, tem como você me ajudar nisso?

    Tenho um link deste teu script em um site aqui, dá uma olhadinha nas minhas modificações por favor, é só passar o mouse sobre as imagens e verá minhas modificações feitas diretamente no css do tooltip.
    http://www.neoraddepoxipiso.com.br/fotos.php
    Agradeço desde já.

      1. Carlos, talvez vc consiga fazer tenta pegar as dimensões e se somar com a posição do elemento na pagina. Exemplo:

        var width = $(this).width();
        var height = $(this).height();
        var top = $(this).offset().top;
        var bottom = top + height;
        var left = $(this).offset().left;
        var right = left + width;

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *