Crie dicas de ferramentas minimizadas em CSS puro com Wenk

Com um nome tão estranho, você não esperaria muito de Wenk, um livre Biblioteca de dicas de ferramentas CSS. Ainda é uma das menores bibliotecas você pode obter medições abaixo de 1KB quando gzipped.

Wenk usa CSS puro com dados-* atributos para criar dicas de ferramentas ao vivo que você pode restilar e posicionar ao seu gosto. O melhor de tudo, é uma biblioteca totalmente gratuita com código fonte disponível no GitHub.

Estas dicas de ferramentas leves são super simples de adicionar ao seu site. Você só precisa do Wenk.css Arquivo adicionado ao cabeçalho da sua página, que você pode baixar do repositório do GitHub.

Ou você poderia até adicione o arquivo CDN que está hospedado no CDN do GitHub. Aqui está o código para isso:

Ou, se você é um fã de npm / bower você pode instalar este pacote do terminal.

As tags de dica de ferramenta padrão não têm muitos dados personalizados. Eles te deixam selecione a posição e a largura, mas você tem que alterar manualmente o CSS se você quiser que eles sejam estilizados de forma diferente.

Por exemplo, você pode querer uma seta CSS adicionada à dica de ferramenta que aparece acima do elemento dica de ferramenta. Isso é bastante simples de criar, mas você precisará limpar a folha de estilo Wenk para encontre a classe CSS exata estender.

Aqui está uma amostra de alguns código padrão para dicas de ferramentas Wenk:

   Wenk para a direita!  

A principal página de destino da Wenk inclui demonstrações ao vivo que você pode testar pairando. Esses são as dicas mais básicas você vai conseguir, mas eles são perfeitos para uma biblioteca que pesa menos de um kilobyte.

Uma coisa importante a considerar é suporte ao navegador. Todas as versões do Chrome e Firefox deve funcionar bem. O mesmo acontece com o Opera 12+ e o Opera Mini v8 +. Mas IE8 e IE10 parecem tem problemas renderizando essas dicas. Felizmente, a sua quota de mercado está caindo rápido, mas é algo a considerar antes de usar.

Ainda estou espantado com o quanto você pode fazer com tão poucos KBs. A biblioteca Wenk é um testemunho do desenvolvimento de frontend moderno e mostra que um pouco pode ir longe.

Você pode cavar através do fonte inteira no GitHub, junto com demonstrações ao vivo e partes de codigo para configurar e criar essas dicas de ferramentas para seu próprio site.