Tutoriais de dicas de ferramentas úteis e plugins jQuery

A dica de ferramenta é um elemento comum da interface gráfica do usuário. É usado em conjunto com um cursor, geralmente um ponteiro do mouse. O usuário passa o cursor sobre um item, sem clicar nele, e uma dica de ferramenta pode aparecer - uma pequena "caixa de passar o mouse" com informações sobre o item que está sendo passado.

Eu compilei alguns tutoriais e plugins jQuery para dicas de ferramentas.

1. TinyTips – Plugin leve do jQuery para dicas de ferramentas

TinyTips é um plugin jQuery muito leve que permite adicionar dicas de ferramentas para praticamente qualquer elemento em uma página. Completamente documentado e amigável ao designer.

2. Marcação de fotos no estilo Flickr usando jQuery

jQuery Photo Tagger vem em cerca de 1.000 linhas de código. Como tal, você pode conferir a página do projeto ou experimentar a demonstração online por si mesmo. Observe que você precisa segurar a tecla CTRL ao clicar com o mouse para criar um ponto de acesso.

Demonstração | Download

3. Plugin jQuery de dica de ferramenta personalizada TipTip com zero imagens

TipTip usa o atributo title exatamente como a dica de ferramenta do navegador nativo. No entanto, o título será copiado e removido do elemento ao usar TipTip para que a dica de ferramenta do navegador não apareça.
TipTip gera apenas um conjunto de elementos pop-up no total, em vez de gerar um conjunto de elementos pop-up para cada elemento com TipTip aplicado a ele. Isso ajuda a acelerar as coisas e reduz o tempo de processamento. Os elementos gerados são todos elementos div e são anexados ao final do elemento body.

4. Como construir as novas anotações visuais com CSS3

ZURB nos ensinou como construir as novas anotações visuais. A solução não era tecnicamente muito complexa. Com o Notable, eles adotaram o conceito de degradação graciosa: eles aproveitam as novas técnicas de CSS que se degradam de forma limpa para navegadores mais antigos.

Demonstração

5. Mostre seus links como uma lista suspensa com o Pluralink

Pluralink é um plugin javascript incrível para organizar vários links em seu texto.

6. Efeito Hover em escala de cinza com CSS e jQuery

Grayscale Hover Effect com CSS e jQuery depende de CSS Sprites e algumas linhas de jQuery, mas requer um pouco de preparação antes de ser implementado. Não é recomendado para projetos de grande escala e provavelmente é melhor para exibir peças de portfólio.

7. Veja mais de perto com o Plugin jQuery AnythingZoomer

Você tem uma pequena área. Você passa o mouse sobre ele. Uma área aparece dando-lhe uma visão ampliada. Este é um plugin jQuery que faz isso. Não vou dizer para que você deve usá-lo ou elaborar cenários de casos de uso. Sua própria criatividade pode ajudá-lo lá.

Demonstração

8. Crie uma dica de ferramenta rica em conteúdo com JSON e jQuery

Este tutorial irá demonstrar como construir dicas de ferramentas que são alimentadas por jQuery, com informações extraídas de um array JSON.

Demonstração

9. Substitua sua dica de ferramenta padrão por uma dica de ferramenta bonita (mb)

(mb)Tooltip é uma bela dica de ferramenta para sua página web em jQuery.

Download

10. Captify exibe legendas de imagem bonitas que aparecem no rollover

Captify é um plugin para jQuery escrito por Brian Reavis para exibir legendas de imagens simples e bonitas que aparecem no rollover. Ele foi testado no Firefox, Chrome, Safari e no miserável Internet Explorer. O Captify foi inspirado no ImageCaptions, outro plugin jQuery para exibir legendas como essas.

11. Visualize Imagens com o Plugin jQuery imgPreview

Peter Higgins criou o Dojo Zoomer. Está dividido em 3 painéis. Ao passar o mouse sobre a imagem no painel esquerdo, o painel direito exibe dinamicamente a parte cortada da imagem, para que você possa focar explicitamente na parte da imagem principal que lhe interessa.

12. Ampliador de Imagem Javascript jQuery sob GPL

JQZoom é um ampliador de imagem javascript construído no topo do popular framework javascript jQuery.

13. Dicas de ferramentas transparentes simples com jQuery e CSS

As dicas de ferramentas CSS são muito populares no design moderno da web e, ao contrário da crença popular, é muito fácil criá-las, especialmente com um dos frameworks javascript tão populares.

Demonstração

14. Magic Toolbox – Ferramentas Javascript e Flash Image Zoom

Magic Toolbox criou 2 incríveis ferramentas de zoom de imagem javascript (Magic Zoom e Magic Magnify). Magic Zoom é uma ferramenta de zoom JavaScript. É a melhor maneira de exibir imagens com detalhes incríveis.

15. Prototip 2 – Crie belas dicas de ferramentas com facilidade

Prototip permite que você crie facilmente dicas de ferramentas simples e complexas usando a estrutura javascript Prototype.

Demonstração

16. Dica de ferramenta e visualização de imagem mais fáceis usando jQuery

A dica de ferramenta e a visualização de imagem mais fáceis é um daqueles pop-ups de bolha semelhantes a dicas de ferramenta que aparecem quando você passa por um link ou uma miniatura.

Demonstração

17. Dicas de ferramenta de bolha pop-up estilo coda com jQuery

Coda é uma das novas ferramentas de desenvolvimento web para Mac – e é popular entre designers e desenvolvedores.

18. Marcar região de imagem clicável mostra dica de ferramenta pop-up

Taggify é um widget da web que permite que blogueiros e editores aprimorem seus sites adicionando dicas de ferramentas de imagens vinculadas a determinadas requisições de imagens.
Demonstração

19. Dicas de bolha discretas com Javascript e CSS

As dicas de ferramentas de bolha são uma maneira fácil de adicionar (através de um pouco de CSS e javascript) dicas de ferramentas sofisticadas com uma forma de balão a qualquer página da web.

Demonstração

20. Dicas de ferramentas de fade in e out para protótipo e scriptaculous

CoolTips é uma técnica leve e discreta de substituição de dicas de ferramentas de navegador da Web JavaScript.
CoolTips é usado para substituir dicas de ferramentas de navegadores da web convencionais. As dicas de ferramentas obtêm o conteúdo do atributo title, portanto, são totalmente discretas. CoolTips é uma classe OO baseada nos frameworks Prototype JS e script.aculo.us.

21. Dicas de ferramentas transparentes e esmaecidas para títulos doces

Sweet Titles Fading Tooptips não é uma imitação dos títulos NICE nem está tentando melhorar a tentativa revisada de Dunstan. E definitivamente não é extraído de um desses scripts infestados de manipuladores de eventos do Dynamic Drive .

Demonstração

22. Dicas de ferramentas para a maioria dos recursos de protótipos para protótipos

Prototip permite que você crie facilmente dicas de ferramentas simples e complexas usando a estrutura javascript Prototype. Se você também usa o Scriptaculous, pode até adicionar alguns efeitos interessantes a eles.

Demonstração

23. Dicas de ferramentas leves do BoxOver DHTML/Javascript

BoxOver usa javascript / DHTML para mostrar dicas de ferramentas em um site. A implementação das dicas de ferramentas, no entanto, não requer conhecimento de DHTML ou javascript. Existem muitos ajustes que podem ser configurados para personalizá-lo de acordo com suas necessidades, definindo através do atributo “título” de uma tag.