ToolTip personalizado utilizando JQuery e EasyToolTip

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Uma alternativa bem interessante e que deixa um site com muito estilo, é utilizar tooltips personalizados. ToolTips são caixas de ajuda ou de informações extras que você pode adicionar aos seus componentes HTML. Utilizando o plugin para Jquery ,

 Uma alternativa bem interessante e que deixa um site com muito estilo, é utilizar tooltips personalizados. ToolTips são caixas de ajuda ou de informações extras que você pode adicionar aos seus componentes HTML. Utilizando o plugin para Jquery , EasyTooltip, você pode estilizar as propriedades Title dos componentes HTML e assim, exibir um conteúdo mais elegante e com efeitos css.

A biblioteca javascript Jquery, dispensa aprensentações para qualquer desenvolvedor web, mas para explicar rapidamente, o Jquery é uma biblioteca em javascript, que agrega aos desenvolvedores diversas funções prontas. O JQuery é gratis e tudo esta em um arquivo .js bem pequeno que você pode baixar acessando o site oficial do projeto (veja no final do texto uma lista com todos os links necessários) .

Junto ao Jquery, você pode utilizar diversos plugins desenvolvidos por terceiros que adicionam diversas funcionalidades ao JQuery, um desses plugis, é o EasyTooltip. Facil de utilizar, permite que você adicione mais efeito aos seus sites. Basta algumas linhas de codigo e você pode ainda configurar o style css para atender aos seus requisitos.

Vamos por a mão na massa:

Você pode criar uma pagina HTML simples e adicionar referencias as bibliotecas que vamos usar, adicione o Jquery e o EasyToolTip.js de preferencia entre as tags .

<script src="Library/jquery-1.4.1.min.js" type="text/javascript">script>

 

<script src="Library/easyTooltip.js" type="text/javascript">script>

Logo depois, você deve adicionar as linhas de codigo abaixo:

<script type="text/javascript">

        $(document).ready(function() {

            $("a").easyTooltip();

        });

script>

Até agora tudo bem simples né, lembrando que, o caminho do arquivo jquery-1.4.1.min.js e easyTooltip.js depende de onde você colocou os arquivos no seu computador.

Feito os passos acima, agora é hora de criar um pequeno estilo para nosso ToolTip, o css abaixo é totalmente personalizavel, então, você pode adaptar para suas necessidades.

<style type="text/css">

        #easyTooltip

        {

            padding: 5px 10px;

            border: 1px solid #000;

            background-color: #195fa4;

            color: #fff;

        }

    style>

Feito esse passo, agora é hora de testar nosso trabalho.

http://www.devmedia.com.br/altieripereira

Você pode apontar o mouse para o link e ver que a caixa de ToolTip ja esta com um style diferente do padrão. Agora basta ter um pouco de criatividade e criar seus proprios estilos. Esse script foi testado com Internet Explorer e Firefox, e tudo correu bem.

Uma dica bem simples, mas espero que seja util para vocês. Vale lembrar que, os creditos devem ser mantidos para  Alen Grakalic.

O que você precisa baixar:

http://cssglobe.com/lab/easytooltip/easytooltip.zip

http://code.jquery.com/jquery-1.4.1.min.js

Overview sobre o EasyTooltip:

http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin

Overview sobre Jquery:

http://jquery.com/

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?