Outpus • Soloaga Designs » Crie um tooltip com a Framework Spry

Crie um tooltip com a Framework Spry

Publicado por renansoloaga em Ajax, Destaque, Experiência do usuário - 31 de julho de 2009 | Nenhuma resposta
 Crie um tooltip com a Framework Spry

O Tooltip, ou seja a dica/complemento que é apresentado numa janela que aparece ao se passar o mouse sobre um elemento da página (chamaremos este de gatilho),  é uma ferramenta muito útil em qualquer projeto de webdesign, e necessária em alguns. Devido à disponibilidade de um grande número de frameworks [?] para desenvolvimento de Ajax está se tornando cada vez mais comum econtrarmos estas janelinhas flutuantes que servem como apêndice para facilitar a navegação. Apesar deste grande número de opções, na minha última pesquisa não encontrei nenhuma que fosse fácil de aplicar. Então resolvi recorrer a uma framework disponível no próprio Dreamweaver, a framework Spry.  Para quem utiliza o Dreameaver, este método para criar um tooltip é com certeza o mais fácil e rápido.  Para entender onde chegaremos com este tutorial, você pode uma ver demonstraçãodo resultado final aqui.

A framework Spry

A Spry Framework é uma biblioteca de recursos Ajax que já vem incorporada no Dreamweaver. A cada nova versão do programa ela vem sendo implementada e se tornando mais popular. Não é necessária uma discussão do quão prática ela é para o desenvolvedor que utiliza o Dreamweaver, porém ao compreender sua sintaxe e começar a explorar suas possibilidades, qualquer desenvolvedor pode utlizá-la, trabalhando ou não com o Dreamweaver. Até mesmo por isto, neste post não seguirei o caminho de acesso pela barra de ferramentas do programa.

A implementação

A implementação é um processo teoricamente simples, vou organizar em três etapas:

  1. Insira as linhas que invocarão os arquivos .js e .css do script na <head></head> do seu documento: 
    <!-- TOOLTIP -->
<script src="_ajax/SpryTooltip.js" type="text/javascript"></script>
<link href="_ajax/SpryTooltip.css" rel="stylesheet" type="text/css" />
<!-- FIM DO TOOLTIP -->
  2. Crie os elementos html que servirão de gatilho(irá disparar a tooltip) e de janela para a dica. Neste caso eu ultilizei um elemento <span></span> para ser o gatilho e a janela da tooltip é uma <div></div>. Veja: 
    <!-- EXEMPLOS DE GATILHO -->
<p class="exemplo"><span id="gatilho1">Gatilho com fade. (Passe o mouse aqui)</span></p>
<p class="exemplo"><span id="gatilho2">Gatilho sem fade. (Melhor resultado no IE)</span></p>
<!-- FIM DOS EXEMPLOS DE GATILHO -->

-------------------------------------------------------------------------

<!-- TOOLTIP 1 -->
<div class="tooltipContent png" id="tip1">
<h3>Tip 1</h3>
<p>Pode ser o que voc&ecirc; quiser !</p>
</div>
<!-- TOOLTIP 1 -->
<!-- TOOLTIP 2 -->
<div class="tooltipContent png" id="tip2">
<h3>Tip 2</h3>
<p>Sem fade o IE renderiza melhor a transpar&ecirc;ncia.</p>
</div>
<!-- TOOLTIP 2 -->
  3. O último passo é inserir o código javascript que cria os tooltips no fim do seu documento, antes da tag </body>. Note que cada tooltip deve ser iniciada atrvés deste código. Veja o exemplo: 
    <!-- SCRIPTS -->
<script type="text/javascript">
<!--
var sprytooltip1 = new Spry.Widget.Tooltip("tip1", "#gatilho1", {closeOnTooltipLeave: true, offsetX: "-83px", offsetY:"-140px", useEffect:"fade", followMouse: true});
var sprytooltip2 = new Spry.Widget.Tooltip("tip2", "#gatilho2", {closeOnTooltipLeave: true, offsetX: "-83px", offsetY:"-140px", followMouse: true});
//-->
</script>
<!-- FIM DOS SCRIPTS -->
</body>

O processo de implantação é este. O fator que irá diferenciar a sua tooltip das outras é como você vai personalizá-la.  Se você achou este solução útil, clique aqui para baixar os arquivos deste exemplo.

Considerações sobre o exemplo

O exemplo que estou mostrando utiliza alguns recursos que não serão discutidos neste post, mas provavelmente serão pautas de postagens futuras, como por exemplo:

  • Recurso para permitir que o arquivo .png transparente, ultilizado como fundo na janela da tooltip, seja reconhecido pelo navegador IE6.
  • Recurso de CSS que faz parte das inovações do novo padrão CSS 3, o text-shadow (sombra do texto). Para perceber este recurso experimente visualizar o modelo com os navegadores Internet Explorer e com o Firefox. Você perceberá que o título e o link do rodapé apresentam vairações, que por mínimas que sejam, podem dar ou não mais estilo ao conteúdo.
  • Variações de efeitos e possibilidades para a apresentação do tooltip. No exemplo exploro dois métodos, com fade e sem fade, porém estas variações são muitas e podem ser encontradas aqui (em inglês), na documentação completa do Framework Spry.

Posts relacionados:

Compartilhe este post:

Digg this ! So delicious Stumble it! Lendo post Crie um tooltip com a Framework Spry




Deixe um comentário