As 6 melhores bibliotecas de tooltips para React em 2024
Produto

As 6 melhores bibliotecas de tooltips para React em 2024

ÍNDICE
    A melhor plataforma de adoção digital. Implantação rápida e engajamento garantido.
    Teste grátis >
    Veja como a UserGuiding pode melhorar a experiência do seu produto.
    Fale com um especialista >
    A melhor plataforma de adoção digital. Implantação rápida e engajamento garantido.
    Junte-se a mais de mil equipes >
    Quer aumentar a
    adoção do seu produto?
    Fale com nossos
    especialistas
    AGENDAR DEMO
    ÍNDICE

    Home / Produto / As 6 melhores bibliotecas de tooltips para React em 2024

    Tooltips podem ser uma forma incrível de educar e engajar com os usuários em diversas plataformas, incluindo web, celular e desktop.

    Mas criar um por conta própria no seu app React pode ser um desafio.

    Diversos plugins e bibliotecas JavaScript de código aberto podem ajudá-lo com esse desafio e facilitar o trabalho de desenvolvimento de elementos de sobreposição.

    Neste artigo, eu verei os seis melhores plugins de tooltips que foram criados exclusivamente para apps React.

    As 6 melhores bibliotecas de tooltips para apps React:

    1. Tippy.js / React
    2. Chakra UI
    3. Radix UI's React Tooltips
    4. wwayne's React Tooltip
    5. RC-Tooltip
    6. Floating UI React DOM

    Em vez disso, você não prefere poupar horas de desenvolvimento?

    O tempo dos desenvolvedores é precioso.

    E você precisará de mais do que apenas alguns tooltips para aumentar as conversões dos usuários e o engajamento no seu web app.

    Com um software de onboarding de clientes como a UserGuiding, você pode:

    ✅ Criar tooltips, hotspots, mensagens in-app com gatilhos personalizados em apenas alguns minutos (sim, em minutos!);

    ✅ Configurar tours guiados e guias interativos sem o menor esforço;

    ✅ Fornecer aos usuários Checklists de Onboarding ou Resource Centers sem precisar programar;

    Analisar e personalizar o conteúdo do seu onboarding com um analytics do usuário aprofundado.

    software para criar tooltips
    Crie, publique e personalize. Tudo sem escrever uma linha de código sequer.

    O que é um tooltip no React?

    Um tooltip no React é um elemento de sobreposição que é exibido ao lado de pontos de interesse (botões, recursos, etc.) em apps React. Quando desenvolvido corretamente, ele pode incluir informações, call-to-actions, botões, pesquisas, vídeos e muito mais. Tooltips em React podem ser especialmente úteis ao criar o seu onboarding em React.

    Embora a maioria das pessoas considere esses elementos irritantes e inconvenientes, quando usado da forma correta, eles podem lhe dar uma grande oportunidade de informar e engajar com os usuários.

    Você pode encontrar os primeiros exemplos de tooltips utilizados em versões anteriores do Windows, como 95 e XP. Por exemplo, aqui está o tooltip exibido quando você passava o cursor do mouse sobre o ícone do Internet Explorer:

    first tooltip react
    Um pouco de nostalgia

    Essa tradição permanece até hoje em muitos apps, principalmente quando é usado apenas um ícone simples que age como um botão para um recurso ou app. Por exemplo, a Adobe usa tooltips com GIFs e botões nas versões 2022 dos seus apps mais populares:

    tooltip no photoshop
    Tooltip da ferramenta Crop no Adobe Photoshop 2022

    Os tooltips são usados há bastante tempo por UI designers e desenvolvedores, e eles não devem desaparecer tão cedo. Portanto, chegou a hora de você dar uma chance para eles no seu próprio app React:

    Como eu adiciono um tooltip no React?

    Há inúmeras formas de adicionar tooltips no seu app React. As três formas principais de criar um tooltip no React são:

    1. Desenvolver um tooltip do zero;
    2. Usar uma biblioteca ou um plugin;
    3. Usar uma plataforma no-code para criar elementos in-app como tooltips.

    Para o primeiro método, que pode ser considerado o "modo difícil" de criar qualquer coisa, você pode encontrar diferentes guias online.

    Para o segundo método, você pode simplesmente continuar lendo este artigo para encontrar o plugin que melhor atende às suas necessidades.

    Já para o terceiro método, você pode testar um software de onboarding como a UserGuiding.

    Decidiu qual método você vai usar?

    Ótimo, então vamos em frente.

    O que esperar de tooltips e como obter mais

    Para que servirá o seu tooltip?

    O que você deve esperar de ganhos ou perdas ao adicionar um tooltip no seu app?

    Afinal, como é um bom tooltip?

    A última coisa que você deve fazer é inserir um tooltip que não adicione valor ou ajude os usuários de alguma forma – ou pior, que os irrite.

    Com tantos negócios enchendo seus softwares de tooltips sem uma pesquisa ou análise adequada, muitos designers começaram a evitar o uso de tooltips em seus designs. No entanto, um tooltip que é exibido para o usuário certo e no momento certo afetará positivamente o engajamento e as conversões dos usuários, portanto não desista deles tão cedo.

    Aqui estão algumas sugestões para manter o seus tooltips do React atraentes e interessantes:

    ✅ O tooltip não deve atrapalhar a experiência do usuário e deve ser exibido quando o usuário realmente precisar dele

    ✅ Não se esqueça de inserir um botão de "saída" e uma caixa de diálogo de "não mostrar novamente"

    ✅ Melhore o texto para fazer com que o seu tooltip soe amigável e claro

    ✅ Insira GIFs e imagens para visualizar as informações sempre que possível

    ✅ Mantenha a mensagem curta; se a informação for mais extensa, inclua um botão "saiba mais"

    ✅ Meça a eficiência do tooltip, faça testes A/B e monitore o engajamento do usuário

    As 6 melhores bibliotecas de tooltip do React

    Há um vasto número de plugins de código aberto voltados para a criação de elementos de UI em apps React, mas para tooltips eu diria que você precisa de algo um pouco melhor.

    O tooltip deve ser responsivo, leve e ter um bom desempenho para não atrapalhar nada no seu app.

    Aqui estão as seis bibliotecas que se encaixam nessa descrição:

    1- Tippy.js / React

    Quase cinco milhões de desenvolvedores baixam a Tippy.js todo mês, sendo uma das principais bibliotecas de elementos de sobreposição na web.

    Ela também contém popovers, dropdowns e elementos de menu, mas o principal recurso da Tippy são os tooltips. As maiores vantagens da Tippy.js são a variedade de opções de tooltips e, é claro, sua documentação de alto nível, que pode ajudá-lo a começar facilmente.

    A Tippy.js for React é a versão da Tippy que foi modificada especificamente para web apps em React e conta com mais de mil downloads no GitHub. Os responsáveis pela Tippy estão sempre muito atentos quanto a problemas na biblioteca, tanto na original quanto na versão para React, com cerca de 250 issues fechadas e 26 abertas só na página da Tippy.js for React no GitHub.

    tippyjs react

    Por que a Tippy.js / React?

    ▶ Documentação de alto nível

    ▶ Grande variedade de opções para tooltips

    ▶ Fácil de configurar, fácil de manter

    ▶ Ótimo desempenho

    Configuração da Tippy.js / React

    Você não precisa instalar a Tippy.js original para usar a versão para React. Você pode simplesmente instalar a Tippy.js for React usando o código:

    npm i @tippyjs/react

    Ou pode usar o link CDN.

    Depois disso, você deve seguir a documentação oficial para a versão para React no GitHub ou os guias abrangentes da Tippy.js.

    2- Chakra UI

    Velocidade é importante para você?

    Mas que pergunta… é claro que é!

    A Chakra UI, uma biblioteca desenvolvida exclusivamente para fornecer uma grande variedade de componentes para apps React, tem tudo o que você precisa para atender à sua necessidade – a necessidade de velocidade.

    De modais a sliders, de qualquer tipo de componente de entrada a barras (ou círculos) de progresso, de componentes accordion/toggle a animações de transição, a Chakra tem de tudo.

    Seus tooltips também são bastante satisfatórios. Com diversas opções para diferentes propriedades, você pode criar facilmente tooltips exatamente como imaginou.

    Se você quer ter uma biblioteca sólida para criar componentes personalizados e quer apimentar um pouco os seus sites em React, a Chakra UI é a opção ideal.

    chakra ui tooltip react

    Por que a Chakra UI?

    ▶ Leve

    ▶ Rápida, com ótimo desempenho

    ▶ Fácil de configurar, fácil de usar

    ▶ Enorme variedade de componentes React

    ▶ Inúmeras opções para criar tooltips personalizados

    ▶ Boa documentação

    Configuração da Chakra UI

    Instale os componentes da Chakra UI e todas as dependências usando o NPM:

    $ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

    Você também pode usar o Yarn:

    $ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

    A partir daí, acesse a documentação oficial da Chakra UI para começar a criar tooltips e muitos outros componentes.

    3- React Tooltip da Radix UI

    Outra biblioteca de componentes com diferentes elementos é a Radix Primitives.

    Ela não é tão rápida e diversa quanto a Chakra, mas a Radix UI também tem seus destaques.

    Ela foi criada com foco na acessibilidade e na experiência do desenvolvedor, então eu tenho certeza que será fácil para você.

    Além disso, eu acho que a documentação da Radix Primitives é muito mais abrangente do que qualquer outro plugin nesta lista. Portanto, se você gosta de ter uma verdadeira enciclopédia em mãos quando se trata de documentação, ela pode ser a opção certa para você.

    radix ui tooltip react

    Por que o React Tooltip da Radix UI?

    ▶ Acessível 

    ▶ Oferece uma experiência melhor para desenvolvedores

    ▶ Ótima documentação

    ▶ Fácil personalização

    ▶ Variedade de componentes

    Configuração

    Primeiro, você precisa instalar a Radix Primitive:

    npm install @radix-ui/react-popover@latest -E

    Em seguida, você precisa instalar o tooltip:

    npm install @radix-ui/react-tooltip

    Depois disso, basta seguir as orientações no site oficial da Radix UI.

    4- React Tooltip da wwayne

    Por acaso, você disse que veio aqui só pelos tooltips?

    Hmm, eu tenho quase certeza que ouvi algo do tipo.

    Seja como for, eu também tenho certeza que essa biblioteca lhe dará exatamente o componente que você precisa. O plugin React Tooltip da wwayne oferece o que o nome diz: um tooltip para React, e um dos melhores.

    É bem prático e simples, o que às vezes é exatamente o que precisamos de um novo componente.

    Além disso, também é possível fazer o tooltip flutuar sobre o cursor do mouse, o que, na minha opinião, é uma ideia bastante original.

    biblioteca react tooltip

    Por que o React Tooltip da wwayne?

    ▶ Leve

    ▶ Rápido, com ótimo desempenho

    ▶ Fácil de configurar, fácil de usar

    ▶ Elementos flutuantes interativos

    ▶ Documentação simples

    No entanto, há um problema: se você ficar travado, vai ser difícil obter ajuda dos desenvolvedores, já que há 241 issues abertas na página do plugin no GitHub.

    Configuração

    Basta instalar usando o NPM:

    npm install react-tooltip

    E seguir a documentação na página do React Tooltip no GitHub.

    5- RC-Tooltip

    A RC Tooltip é mais uma biblioteca do tipo "só o tooltip, por favor" que você pode configurar rapidamente e começar a criar.

    Não é o melhor tooltip disponível, mas se as outras opções não funcionarem bem, este pode ser o plugin que você está buscando.

    Ela possui 849 estrelas no GitHub e 162 forks, mas a manutenção está abaixo da média, pois também há muitas issues não resolvidas.

    rc tooltip plugin

    Por que a RC-Tooltip?

    ▶ Leve

    ▶ Fácil de configurar, fácil de usar

    ▶ Boa documentação

    ▶ Também possui opções de acessibilidade

    Configuração da RC-Tooltip

    Instale o plugin com o NPM:

    npm install rc-tooltip

    E siga a documentação na página da biblioteca no GitHub.

    6- Floating UI React DOM

    A Floating UI, antes chamada de PopperJS, é mais uma biblioteca de componentes bastante popular para apps React.

    Ela é muito leve e enxuta e oferece os elementos flutuantes mais comuns, incluindo popovers, menus e dropdowns, além de tooltips.

    Há uma boa variedade de opções de personalização para tooltips, e você também pode adicionar nesting à maioria dos elementos, como pop-ups e popovers.

    Ela conta com uma API e uma arquitetura excelentes, o que é ótimo para desenvolvedores que buscam uma forma simples e escalável de criar componentes, em vez de elementos extravagantes e complicados.

    Além disso, os responsáveis são absolutamente incríveis e atenciosos, com mais de 841 issues fechadas e apenas 22 issues abertas.

    floating ui tooltip

    Por que a Floating UI?

    ▶ Leve e enxuta

    ▶ Fácil de configurar, fácil de usar

    ▶ Muito rápida, com ótimo desempenho

    ▶ Variedade de componentes com muita personalização

    ▶ Boa documentação

    Ótima manutenção por parte dos desenvolvedores

    Floating UI Setup

    Instale a versão da engine de posicionamento do React DOM pelo NPM:

    npm install @floating-ui/react-dom

    A partir daí, é só seguir a documentação oficial.

    Perguntas Frequentes

    Quais são as melhores bibliotecas de tooltip para React?

    Os seis melhores plugins e bibliotecas de tooltip para React são:

    • Tippy.js
    • Chakra UI
    • Radix Primitives
    • wwayne’s React Tooltip
    • RC-Tooltip
    • Floating UI

    Uma biblioteca de código aberto é a melhor forma para criar tooltips no React?

    Há várias bibliotecas de código aberto excelentes para criar tooltips para apps React, mas criar um tooltip usando essas bibliotecas pode demandar mais recursos e tempo do que você gostaria. Em vez disso, você deveria testar um software de user onboarding completo.

    Qual é a melhor alternativa para criar tooltips no React?

    Ferramentas completas como a UserGuiding podem ajudar você a criar tooltips para qualquer web app, independentemente do framework e sem escrever uma linha de código sequer. Você também pode testar a ferramenta gratuitamente, portanto esta seria a melhor alternativa.

    Como personalizar os tooltips no React?

    Se você está desenvolvendo um tooltip do zero, basta seguir as diretrizes do Joe Morgan quanto à personalização de componentes. No entanto, se estiver usando bibliotecas de código aberto, você pode personalizar os tooltips com base no código do plugin.

    Junte-se a mais de mil equipes
    e melhore a adoção do seu produto

    Teste grátis de 14 dias, sem precisar programar,
    e com garantia de 30 dias de reembolso!