Microtip - Biblioteca de dicas de ferramentas CSS com recursos de acessibilidade nativos

Você pode fazer uma pesquisa rápida no GitHub para encontrar dezenas de bibliotecas de dica de ferramenta personalizadas. E parece que os novos chegam à web todos os meses.

O Microtip é um recurso exclusivo, pois é executado em dicas de ferramentas CSS, oferece estética personalizada e usa código-fonte totalmente acessível para todos os usuários.

Se você nunca pensou muito sobre acessibilidade, então a Microtip pode mudar sua opinião. É a mistura perfeita de design limpo com funcionalidade para todos os dispositivos, todos os navegadores e para usuários com grandes deficiências.

Na página inicial, você encontrará um link de download para a biblioteca de microtip e um monte de demonstrações de código.

Você pode obter essa configuração através de um gerenciador de pacotes, um download direto ou puxando-o diretamente de um CDN. isto vem com um arquivo CSS e isso é basicamente tudo que você precisa.

Depois de ter Microtip adicionado à sua página, você pode começar a adicionar dicas de ferramentas para elementos da página. Esses são totalmente compatível com o WAI então eles estão em conformidade com os padrões modernos de acessibilidade perfeitamente.

Aqui está um exemplo de código de dica de ferramenta anexado a um elemento de botão com uma posição personalizada:

Não há muito código certo?

Esta biblioteca é super leve com um total de 1KB minificado. Isso é uma loucura, considerando o quanto você ganha com essas dicas.

As propriedades CSS personalizadas podem ser passadas por meio de atributos HTML para definir o tamanho da fonte, o estilo de transição, a atenuação e muitas outras configurações.

Você também pode Sobrescrever o CSS diretamente para tornar as dicas de ferramentas maiores com cores ou fontes diferentes.

Dê uma olhada na seção de personalização na página principal para mais detalhes. Tudo corre através de HTML e CSS para que você não precise qualquer conhecimento de script para obter este trabalho.

Microtip é super fácil de configurar e personalizar Então, se pelo menos você sabe codificar frontend básico, você vai ficar bem.

Mas dê uma olhada no repositório do GitHub para mais informações de configuração e para obter uma cópia da folha de estilo.

Se você tiver dúvidas ou sugestões para novos recursos, também pode soltar uma linha para o criador no Twitter @_ighosh.