Usar o widget Dica de ferramenta do Spry no Dreamweaver

O widget Dica de ferramenta do Spry exibe informações adicionais quando o usuário passa o mouse sobre um elemento específico em uma página da Web. O conteúdo adicional desaparece quando o usuário tira o mouse desse local. Também é possível configurar as dicas de ferramenta para permanecerem abertas por períodos maiores para que os usuários possam interagir com o seu conteúdo.

O widget Dica de ferramenta contém os três elementos a seguir:

• O recipiente da dica de ferramenta. Este elemento contém a mensagem ou o conteúdo que deve ser exibido assim que o usuário ativa a dica de ferramenta.

• Os elementos da página que ativam a dica de ferramenta.

• O script do construtor. É o JavaScript que informa ao Spry quando deve criar a funcionalidade de dica de ferramenta.

Quando você inserir um widget Dica de ferramenta, o Dreamweaver cria um recipiente de dica de ferramenta usando as tags div e coloca as tags span antes e depois do elemento "acionador" (o elemento da página que ativa a dica de ferramenta). O Dreamweaver usa essas tags por padrão. No entanto, as tags para a dica de ferramenta e para o elemento acionador podem ser de qualquer tipo, contanto que estejam no corpo da página.

Leve em consideração os seguintes pontos ao trabalhar com o widget Dica de ferramenta:

• Uma dica de ferramenta aberta será fechada antes que a próxima seja aberta.

• As dicas de ferramenta são exibidas enquanto o usuário passa o mouse pela área de acionamento.

• Não existe nenhuma restrição quanto ao tipo de tag que pode ser usado para os acionadores e para o conteúdo da dica de ferramenta. No entanto, os elementos em nível de bloco são sempre recomendados para evitar possíveis problemas de processamento entre navegadores.

• Por padrão, a dica de ferramenta aparece 20 pixels abaixo e à direita do cursor. Para definir um ponto de aparência personalizada, use as opções Deslocamento horizontal e vertical do Inspetor de propriedades.

• Atualmente, não é possível manter uma dica de ferramenta aberta durante o carregamento da página no navegador.

O widget Dica de ferramenta requer muito pouco CSS. O Spry usa o JavaScript para mostrar, ocultar e posicionar a dica de ferramenta. Você pode aplicar outros estilos para a dica de ferramenta com as técnicas de CSS padrão, conforme necessário para sua página. A única regra contida no arquivo CSS padrão é uma solução para problemas do Internet Explorer 6; essa regra faz com que a dica de ferramenta apareça acima dos elementos de formulário ou objetos Flash.

Para obter uma explicação mais abrangente sobre como o widget Dica de ferramenta Spry funciona, inclusive uma anatomia completa do respectivo código, consulte www.adobe.com/go/learn_dw_sprytooltip_br.

Para assistir a um tutorial em vídeo sobre como trabalhar com o widget Dica de ferramenta Spry, consulte www.adobe.com/go/lrvid4046_dw_br.

Inserir o widget Dica de ferramenta

Essa ação insere um novo widget Dica de ferramenta com um recipiente para o conteúdo da dica de ferramenta e uma sentença de alocador de espaço que age como o acionador da dica de ferramenta.

Você também pode selecionar um elemento existente na página (por exemplo, uma imagem) e, em seguida, inserir a dica de ferramenta. Ao fazer isso, o elemento selecionado age como o acionador da nova dica de ferramenta. É necessário selecionar um elemento de tag completa (por exemplo, uma tag img ou p) para que o Dreamweaver possa atribuir uma ID a esse elemento caso ainda não exista uma.

Editar opções do widget Dica de ferramenta

É possível definir opções que permitem personalizar o comportamento do widget Dica de ferramenta.

1. Passe o mouse sobre ou coloque o ponto de inserção no conteúdo da dica de ferramenta na página.

2. Clique na aba azul do widget Dica de ferramenta para selecioná-lo.

3. Defina as opções como desejar no Inspetor de propriedades do widget Dica de ferramenta.

Nome

O nome do recipiente da dica de ferramenta. O recipiente armazena o conteúdo da dica de ferramenta. Por padrão, o Dreamweaver usa uma tag div como o recipiente.

Acionador

O elemento da página que ativa a dica de ferramenta. Por padrão, o Dreamweaver insere uma sentença de alocador de espaço, com as tags span antes e depois, como o acionador, mas é possível selecionar qualquer elemento da página que tenha uma ID exclusiva.

Seguir o mouse

Quando está selecionada, esta opção faz com que a dica de ferramenta siga o mouse enquanto o usuário está passando pelo elemento acionador.

Ocultar ao retirar o mouse

Quando está selecionada, esta opção mantém a dica de ferramenta aberta enquanto o mouse está passando por ela (mesmo que o mouse saia do elemento acionador). Manter a dica de ferramenta aberta será útil se houver links ou outros elementos interativos na dica de ferramenta. Se essa opção não for selecionada, o elemento de dica de ferramenta será fechado quando o mouse sair da área de acionamento.

Deslocamento horizontal

Calcula a posição horizontal da dica de ferramenta em relação ao mouse. O valor de deslocamento é calculado em pixels e o padrão equivale a 20 pixels.

Deslocamento vertical

Calcula a posição vertical da dica de ferramenta em relação ao mouse. O valor de deslocamento é calculado em pixels e o padrão equivale a 20 pixels.

Mostrar atraso

O atraso em milissegundos para que a dica de ferramenta apareça depois de ter entrado no elemento acionador. O valor padrão é 0.

Ocultar atraso

O atraso em milissegundos para que a dica de ferramenta desapareça depois de ter saído do elemento acionador. O valor padrão é 0.

Efeito

O tipo de efeito que deve ser usado quando a dica de ferramenta for exibida. Veneziana simula uma janela veneziana que se move para cima e para baixo para mostrar ou ocultar a dica de ferramenta. Atenuar ativa e desativa a dica de ferramenta. O valor padrão é Nenhum.