Mais de 40 dicas de ferramentas úteis com CSS, JavaScript e jQuery
Um interessante elemento da interface do usuário, dicas de ferramentas (também chamadas de infotips) fazem uma pequena caixa aparecer quando o cursor do mouse é pairado sobre um determinado texto ou imagem com informações em relação ao elemento sendo pairado. Em termos de experiência do usuário, as dicas de ferramentas fornecem aos usuários a fonte de informações mais rápida e fácil sem ter que clicar em nada.
Embora a maneira mais simples de adicionar dicas de ferramentas ao seu texto seja usar a tag HTML ou TITLE =””, ALT =””. No entanto, existem alguns muito legal desenhos de ferramentas e estilos que você pode criar com JavaScript e CSS usando scripts de dicas de ferramentas. Vamos dar uma olhada.
CSS
Balloon.css - Balão é biblioteca de CSS composto com SasS e LESS para mostrar uma dica de ferramenta interativa. O conteúdo e a posição da dica de ferramenta são configuráveis através do dados- atributo. Você pode mostrar a dica de ferramenta à esquerda, à direita ou à esquerda-direita. Você também pode adicione emojis ao conteúdo. Balloon.css pode ser instalado através do NPM e / ou carregado a partir do CDNJS.
Simptip - Feito com o SasS permitindo reconfigure e recompile o código para atender sua necessidade. A posição e o conteúdo da dica de ferramenta são configuráveis por meio do nome da classe e dica de ferramenta de dados atributo. Simptip está disponível como um Pacote NPM, Yarn e Bower.
Hint.css - Uma das bibliotecas populares de CSS para exibir dicas de ferramentas, o Hint.css é usado por muitos sites populares como Fiverr, Webflow e Tridiv. Ao contrário das outras duas bibliotecas CSS, O Hint.css usa rótulo aria Você pode configurar o tamanho e cor através dos nomes das classes usando a metodologia BEM. O Hint.css está disponível no NPM, Bower e CDNJS.
Microtip - Outra biblioteca CSS incrível para criar dicas de ferramentas “Acessibilidade” em mente, Microtip usa rótulo aria para manter o conteúdo da dica de ferramenta e dados- atributo para configurar o tamanho e a posição da dica de ferramenta.
Ele usa a variável CSS, que permite personalizar a dica de ferramenta com apenas um simples arquivo CSS. As variáveis CSS já são suportadas em muitos navegadores da Web e móveis. A microtip está disponível como NPM, pacote Yarn e UNPkg CDN.
Wenk - São apenas 733 bytes. Uma biblioteca super leve escrito em um CSS super-moderno usando CSSNext, LESS e SCSS Assim, você pode personalizar e recompilar os estilos da maneira que preferir. O Wenk pode ser baixado do NPM, Yarn e dos seguintes serviços gratuitos da CDN: rawgit.com e unpkg.com.
Tooltippy - Outro biblioteca CSS leve sendo apenas cerca de 1 KB de tamanho. O Tooltippy inclui vários temas pré-criados para estilizar a dica de ferramenta. É escrito com um pré-processador CSS chamado Stylus. Veja as instruções sobre como você pode estender ou personalizar esses temas.
ElegantDicas - Esta biblioteca vem com alguns temas pré-construídos que pode ser alterado com os nomes de classe fornecidos. Ao contrário do outro, as bibliotecas que dependem do HTML5 dados- ou o rótulo aria atributo, ElegantTips requer um elemento extra adicionado para formar a dica de ferramenta. Isso permite que você adicione literalmente qualquer conteúdo à dica de ferramenta além do texto simples.
Tootik - Não só isso, essa biblioteca CSS fornece a folha de estilos no formato CSS, LESS e SasS, como também fornece uma GUI fácil de usar para personalizar a dica de ferramenta. Você pode simplesmente copiar e colar o HTML gerado por essa ferramenta. É simples assim.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS vem com um abundância de opções para configurar a dica de ferramenta. Podemos personalizar as animações, a seta da dica de ferramenta, a largura, o tamanho, o tema e muito mais. Ele também fornece funções de retorno de chamada com o qual você pode executar uma função quando a dica de ferramenta é mostrada e ocultada. Esses recursos fazem do TippyJS uma das nossas poderosas bibliotecas JavaScript em nossa lista para criar uma dica de ferramenta.
Darsain Tooltip - Esta biblioteca fornece a implementação básica de uma dica de ferramenta. Ainda assim, oferece extensas opções para configurar o comportamento de tootip, e um conjunto de nomes de classes para alterar a aparência da dica de ferramenta. A dica de ferramenta funciona bem em navegadores mais antigos como o IE9 e, se necessário, o IE8 com alguns ajustes.
Bubb - O Bubb pode ser bem adequado para usuários avançados de JavaScript. Usando seu APIs extensivas, além de exibir texto simples, você pode adicionar programaticamente um conteúdo HTML mais complexo à dica de ferramenta. É muito legal; você pode consultar os documentos dos exemplos.
Popper - Contém uma abstração técnica para criar algo que “estala”, como uma dica de ferramenta, um popover e drop-downs. O TippyJS usa-o como base da biblioteca e é usado por grandes nomes da Web, como Bootstrap, Microsoft e Atlassian..
Sugestão YY - Ao contrário das outras bibliotecas, a YY Tooltip não requer que você adicione um elemento ou atributos HTML. Funciona totalmente com JavaScript e o conteúdo, posição e cores são definidos em um objeto em vez de em um elemento HTML. É perfeito para ser usado em conjunto com um aplicativo da web JavaScript completo.
Position.js - Outra excelente biblioteca JavaScript nativa para criar dicas de ferramentas, Position.js fornece uma GUI para configurar a função e simplesmente copiar e colar o código gerado lá. Position.js pode ser usado em conjunto com o React.js ou o Vue.js.
Bezet Tooltip - Esta biblioteca fornece 14 opções para exibir a dica de ferramenta; como no certo, esquerda, inferior, centro esquerdo, endireitar, centro inferior, Além disso, também inteligente o suficiente para que pudesse ajustar a posição da dica de ferramenta com base no espaço disponível cercando a dica de ferramenta. Confira a demonstração.
MouseTip - Esta biblioteca JavaScrtipt irá criar um tooltip que se moverá ao longo da posição do cursor. A dica de ferramenta é configurada com um padrão não padrão ratoeira- atributo em vez de usar o HTML5 dados- atributo. Mousetip está disponível como um módulo NPM.
Internetips - Bastante semelhante ao MousetTip, a dica de ferramenta gerada por essa biblioteca segue a posição do cursor. Tudo é configurado através do objeto JavaScript em vez de HTML e atributos também são construídos para navegadores modernos. É leve e rápido.
MTip - Uma biblioteca JavaScript para Tooltip com excelente compatibilidade com navegadores. É compatível com o IE8, totalmente personalizável através das opções, e você pode adicionar a Tooltip a qualquer elemento, mesmo em um img (um elemento de imagem).
Bubblesee - uma biblioteca JavaScript leve que fornece uma funcionalidade simples de um “dica de ferramenta”. É fácil usar a biblioteca JavaScript sem opções complicadas para personalizar a saída. Um arquivo Sass é fornecido se você quiser alterar a aparência da dica de ferramenta. Confira a demonstração.
Tipfy - Construído com a sintaxe JavaScript moderna, o ES6, Tipfy tem apenas 2 KB de tamanho. A biblioteca fornece duas versões de arquivos: tipfy.min.js fornecendo o script com sintaxe ES6 moderna, e tipfy.es5.min.js se você precisar de compatibilidade com navegadores mais antigos. Usa dados- atributo para personalizar a dica de ferramenta; a data-tipfy-side, por exemplo, é usado para definir a direção da dica de ferramenta e usar data-tipfy-text atributo para adicionar o conteúdo da dica de ferramenta.
jQuery
Tooltipster - Esta biblioteca oferece várias opções para personalizar quase tudo, como tema, animação, suporte ao toque, conteúdo, gatilho de abertura e fechamento, Ele também fornece ouvinte de eventos e retornos de chamada personalizados, permitindo que os desenvolvedores estendam a dica de ferramenta com funções personalizadas. Além disso, sendo um plugin jQuery, o tooltip funcionaria no navegador mais antigo, como o IE6, dependendo da versão do jQuery sendo usado.
Protip - Outro plugin jQuery extenso, Protip suporta 49 posições, HTML para o conteúdo da dica de ferramenta, suporte a ícones, retornos de chamada personalizados, e muito mais. Protip fornece uma GUI permitindo que você personalize a dica de ferramenta com facilidade.
PowerTip - Este plugin jQuery também traz opções e APIs, fornecendo aos desenvolvedores uma série de maneiras diferentes de implementar as dicas de ferramentas. Suporta navegação de teclado; fazendo o pop-up aparecer ao navegar pelos elementos com o Aba teclado. PowereTip é disponível como um módulo NPM. Pode ser usado com RequireJS e Browserify.
Dica de Aria Acessível - Um plugin jQuery com o recurso de acessibilidade embutido, a dica de ferramenta é projetado para exibir uma caixa de diálogo com um título, várias linhas de texto e um botão Fechar. É um dos seus próprios na nossa lista.
DicasJS - Um simples plugin jQuery, mas traz características bastante distintas. o conteúdo da dica de ferramenta é definido com um dica de ferramenta de dados atributo. Além disso, podemos também envolver o conteúdo com caracteres especiais para formatar o conteúdo semelhante à formatação do Markdown. Podemos usar * tornar o conteúdo ousado, ~ para itálico e ^ para o cabeçalho.
Dica de ferramenta escura - Essa biblioteca fornece alguns recursos realmente úteis para ativar a dica de ferramenta. Por exemplo, podemos adicionar um botão confirmar - Sim e Não, diminua o fundo enquanto a dica de ferramenta é exibida e adicione elementos HTML ao conteúdo. Eu acho que você deveria checar a página de demonstração.
Aria Tooltip - Outra dica com o recurso de Acessibilidade embutido, este plugin jQuery é compatível com WAI-ARIA 1.1. É responsivo de uma maneira que você pode Fornecer configurações diferentes para diferentes tamanhos de viewport. Aria Tooltip está disponível como um módulo NPM chamado t-aria-tooltip.
Toolbar.js - Enquanto o outro plugin jQuery só pode mostrar texto simples ou conteúdo HTML dentro de uma dica de ferramenta, Plugin jQuery cria uma barra de ferramentas. A dica de ferramenta conteria dois ou mais links com um ícone que normalmente executará uma ação em clique, como qualquer barra de ferramentas. Confira a documentação e exemplos.
VueJS
V-Tooltip - O V-Tooltip é um componente do Vue.js desenvolvido pela Popper.js sob o capô. Ele fornece uma nova diretiva nomeada v-tooltip que pode ser adicionado a qualquer elemento para criar uma dica de ferramenta. o v-tooltip pode conter o conteúdo da dica de ferramenta ou as Opções. Além do costume v-tooltip diretiva, você também pode adicionar a dica de ferramenta v-popover componente. Com este componente, você pode adicionar conteúdo mais complexo à dica de ferramenta com o componente Vue.js ou HTML.
Vue-Bulma Tooltip - Um componente Vue.js para criar uma dica de ferramenta com base no Bulma UI Framework. Esta biblioteca faz parte do componente do Vue Bulma. Mas o O componente tooltip está disponível como um módulo NPM chamado vue-bulma-tooltip que você pode usar isso como componentes independentes.
Vue-Directive-Tooltip - No geral, é semelhante ao componente V-Tooltip baseado no Popper.js e fornece a mesma diretiva chamada v-tooltip. No entanto, não parece fornecer v-popover componente.
Vue-Tippy - Esta biblioteca envolve o Tippy.js em um componente Vue.js. Ele possui uma diretiva personalizada do Vue.js chamada v-tippy isso funciona como um atributo HTML; podemos adicionar conteúdo para a dica de ferramenta ou as opções para personalizá-lo. Também renderiza componente personalizado Vue.js no conteúdo da dica de ferramenta usando o html opção.
VueJS-Popover - Um Vue.js personalizado com uma diretiva personalizada chamada v-popover e dois componentes personalizados ou seja
Vue-Hint - Um plug-in Vue.js que envolve o Hint.css. Os recursos do plug-in v-hint-css diretiva para adicionar a dica de ferramenta. isto traz o mesmo conjunto de opções que o Hint.css, então você pode adicioná-los como um objeto JavaScript ou modificador Vue.js.
ReactJS
Reagem Joyride - Um componente React para exibir um conjunto de dicas de ferramentas orientar novos usuários a se familiarizarem com seu novo aplicativo.
Reagir Flutuante - Esta biblioteca envolve o Popper.js em um componente React chamado Floater, então ele tem os mesmos recursos excelentes que o do Floater. Você pode adicionar dicas de ferramentas e pop-up, e você também pode brincar com este componente através desta sandbox.
Reagir Autotip - Um simples componente React com o recurso de posicionamento automático, eact Autotip ajustar automaticamente a posição da dica de ferramenta quando o espaço disponível em torno dele muda.
Reagir Tippy - Construído em cima de Tippy.js e Popover.js. Esta biblioteca apresenta um Tooltip componente que você pode incluir no seu aplicativo React.
Reagir Dica - Um componente React que estende o Hint.css. Os componentes adicionam alguns recursos que não estão disponíveis no Hint.css, como posição automática, atraso e uma função de retorno de chamada.
Mais
Dicas de brasas - Um componente Ember.js para criar dicas de ferramentas, é construído sobre o Popper.js. O componente também foi projetado com a Acessibilidade em mente e continua melhorando para atender a cerca de 508 clientes..
D3 dica - um plugin D3.js. D3.js é uma biblioteca JavaScript para visualização de dados, como gráficos, mapas, diagramas, etc. Este plugin permite que você mostre a dica de ferramenta sobre esses dados..
