Como criar uma tooltip Bootstrap, configurar aparência, direção e distância?
- Guia prático com exemplos reais e dicas para melhorar a usabilidade da sua aplicação web.
- Utiliza Bootstrap 5.3.
5/Mar/2026
Índice
1. Introdução
Ao desenvolver um site ou uma aplicação web, é comum o programador criar um botão e se perguntar: Será que o usuário vai entender o ícone nesse botão? Será que vai saber para que ele serve?
Em situações como essa, a melhor solução é criar uma tooltip — uma pequena caixa de texto que aparece quando o usuário passa o ponteiro do mouse sobre o botão:
Em rosa, usuário observa botões do Google Maps.
Em verde, ponteiro do mouse sobre o botão Transporte Público exibe sua tooltip.
Apesar de parecer simples, criar uma tooltip não é tarefa fácil, pois envolve conhecimentos de HTML, CSS e JavaScript. Além disso, é necessário programar seu comportamento e posição em situações distintas, que podem variar de acordo com a resolução e o tamanho da tela do dispositivo.
Felizmente, existem frameworks que facilitam o processo — e um dos mais conhecidos é o Bootstrap.
O Bootstrap é o framework front-end mais popular utilizado no desenvolvimento web. Com ele, é possível criar sites e aplicações de forma fácil, rápida, elegante e responsiva. Além disso, o Bootstrap é totalmente gratuito e possui código-fonte aberto (open source).
Logotipo Bootstrap
(clique para conhecer o projeto)
(abre em nova aba)Quando implementei meu portfólio de projetos (togtec.com.br), encontrei diversos artigos, vídeos e cursos que ensinam como criar uma tooltip Bootstrap. No entanto, a maioria demonstra como associar a tooltip a um elemento HTML (botão ou imagem) centralizado no meio da tela.
Nesse cenário, basta inicializar a tooltip e pronto — não é necessário se preocupar com cor, direção ou distância.
Mas, no dia a dia, os botões não estão sozinhos — eles fazem parte de uma aplicação — e é aí que os problemas começam!
Se os botões fazem parte de uma barra de navegação, por exemplo, é necessário ajustar a distância para a tooltip não sobrepor a barra.
Caso contrário, se barra de navegação e a tooltip forem da mesma cor, torna-se necessário alterar a cor de fundo da tooltip para que o usuário possa enxergá-la.
Além disso, ao testar o site em um telefone celular, o desenvolvedor descobre que tooltip e tela touch não combinam.
Sendo assim, este artigo tem como objetivo ir além do nível iniciante e responder às seguintes perguntas:
- Como criar uma tooltip Bootstrap?
- Como definir a direção? (superior, direita, inferior e esquerda)
- Como controlar a distância?
- Como modificar a aparência? (cor de fundo, cor da fonte e remover a seta)
- Como evitar que as tooltips deteriorem a experiência de navegação dos usuários do mundo mobile?
- Como configurar a tooltip em um link que abre uma nova aba do navegador?
2. Integrando o Bootstrap a uma página HTML
Crie um arquivo index.html e inclua a tag <meta name="viewport">(abaixo, linha 5) — para garantir o comportamento responsivo em dispositivos móveis.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tog Portfolio - Everything you need to know about tooltips!</title>
</head>
<body>
<h1>Bootstrap Tooltip Demo Page V1</h1>
</body>
</html>página de teste v1
Inclua o CSS e o JavaScript:
- O CSS (tag <link>) deve ser incluído dentro da tag <head> (abaixo, linhas 9, 12 e 15).
- O JavaScript (tag <script>) deve ser incluído antes do </body> (abaixo, linhas 21 e 24).
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tog Portfolio - Everything you need to know about tooltips!</title>
<!-- Bootstrap CSS - file: bootstrap.min.css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<!-- Custom CSS - file: main.css -->
<link rel="stylesheet" href="./app.style/main.css">
<!-- Bootstrap Icons - file: bootstrap-icons.min.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
</head>
<body>
<h1>Bootstrap Tooltip Demo Page V2</h1>
<!-- Bootstrap JavaScript - file: bootstrap.bundle.min.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<!-- Custom JavaScript - file: custom-scripts.js -->
<script src="./app.js/custom-scripts.js"></script>
</body>
</html>página de teste v2
🔎 Conhecendo os arquivos
- O arquivo bootstrap.min.css (acima, linha 9) contém a folha de estilos usada pelo Bootstrap para dar aparência, alinhamento e responsividade aos elementos da página.
- O arquivo main.css (acima, linha 12) é um arquivo de estilos customizado e não pertence ao Bootstrap!
- O arquivo bootstrap-icons.min.css (acima, linha 15) importa os ícones Bootstrap.
- O arquivo bootstrap.bundle.min.js (acima, linha 21) é responsável por ativar os componentes Bootstrap que dependem de JavaScript — incluindo as tooltips.
- O arquivo custom-scripts.js (acima, linha 24) é um arquivo de scripts customizado e não pertence ao Bootstrap!
Sua função é definir estilos específicos da página.
No exemplo acima, optou-se por criá-lo na pasta app.style.
Esses ícones não são imagens comuns (como png ou jpeg) mas vetores incorporados em uma fonte.
Dessa forma, podem ser carregados via arquivo CSS e se comportam como texto (podem mudar de cor, tamanho e se ajustar perfeitamente a diferentes resoluções).
Sua função é armazenar o código JavaScript que inicializa as tooltips.
No exemplo acima, optou-se por criá-lo na pasta app.js.
🔎 Como são carregados
A página index.html, ao ser aberta, executa três requisições HTTP para o CDN jsDelivr — uma para cada arquivo:
- bootstrap.min.css
- bootstrap-icons.min.css
- bootstrap.bundle.min.js
Os arquivos .css (adicionados dentro da tag <head>) são carregados antes de a página ser renderizada. O arquivo .js (adicionado antes do </body>) depois.
O CDN é um serviço global de distribuição de conteúdo que replica os mesmos arquivos em servidores de diversos países. Sendo assim, quando a página index solicita os arquivos CSS e JavaScript do Bootstrap, é atendida pelo servidor CDN mais próximo, permitindo que o download seja realizado de forma rápida e segura.
Existem várias empresas que oferecem o serviço de distribuição de conteúdo via CDN. O Bootstrap é distribuído pela rede CDN jsDelivr.
3. Projeto Página de Teste
Para demonstrar a criação de tooltips em um ambiente real e desafiador, que nos permita ir além do nível iniciante, este artigo disponibiliza o projeto Página de Teste.
O projeto Página de Teste possui uma folha de estilos personalizada, um arquivo de scripts customizado e a página index preparada para exibir duas versões distintas do mesmo conteúdo:
- index.html → exibe a versão em Inglês.
- pt/index.html → exibe a versão em Português.
O quadro abaixo apresenta os principais elementos das páginas index — em vermelho, elementos que serão associados a tooltips:
<html lang="en-US">
<head>
...
</head>
<body>
<header>
<!-- start navbar (início barra de navegação) -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<!-- left side (lado esquerdo) -->
icon buttons — Bootstrap Icons + Tag <a> — receberão tooltips
flag buttons — Imagem PNG + Tag <span> + Tag <a> — receberão tooltips
<!-- center section (seção central) -->
Botão hamburger da responsividade (visível apenas em telas menores que 992px)
<!-- right side (lado direito) -->
Links: páginas Home e About (decorativos) — apenas a Home foi implementada
</div> <!-- end container -->
</nav> <!-- end navbar -->
</header>
<main class="mt-5 container">
<div class="container-narrow">
link — Tag <a> — receberá tooltip
logos — Tag <img> — receberão tooltips
</div>
</main>
</body>
</html>página de teste v3
Após o download, basta descompactar o arquivo e abri-lo na sua IDE favorita — particularmente, recomendo o VSCode.
A Página de Teste permite ao leitor acompanhar e replicar os exemplos trabalhados nesse artigo de forma pedagógica — maximizando o aprendizado, facilitando a memorização e mantendo o foco em tooltips.
Embora o objetivo seja apenas tooltips, vale destacar que a página de teste é uma joia da responsividade, capaz de exibir seu conteúdo com elegância, precisão e maestria em telas com largura entre 1920 e 140 pixels — sim, você leu certo: 140 pixels!
Sendo assim, se você é um apaixonado por programação assim como eu, não deixe de analisá-la também sob esse aspecto.
Abaixo, vamos conhecer em detalhes os elementos da Página de Teste que serão associados a tooltips:
No lado esquerdo da barra de navegação (left side), existem cinco botões criados com ícones que serão associados a tooltips.
Para criar um botão, é necessário escolher um ícone na galeria, clicar sobre ele para exibir sua tag e envolvê-la em um link.
🔎 Passo a passo
Para escolher um ícone na galeria, visite a página Bootstrap Icons (abre em nova aba) e digite o nome desejado na caixa de pesquisa — são mais de 2000 opções!
(abre em nova aba)
Usuário digita bootstrap na caixa de pesquisa (1).
Visualiza todos os ícones da galeria que correspondem ao critério pesquisado (2).
Após efetuar a pesquisa, basta escolher um dos ícones retornados e clicar sobre ele para exibir sua tag (<i>). O código abaixo corresponde ao segundo ícone retornado (bootstrap-fill):
<i class="bi bi-bootstrap-fill"></i>O próximo passo é envolver o código do ícone em um link (tag <a>):
<a href="https://getbootstrap.com/">
<i class="bi bi-bootstrap-fill"></i>
</a>A partir de agora, o ícone acima se comporta como um botão clicável; entretanto, é importante notar que:
- O botão criado possui apenas duas tags: <a> e <i>.
- A tag <a> contém um único atributo: href.
- A tag <i> contém um único atributo: class.
- Cada atributo possui um valor curto:
https://getbootstrap.com/
bi bi-bootstrap-fill
🔎 Mas, em um projeto real…
Entretanto, em um projeto real, as coisas não são simples. Para começar, geralmente, a tag <a> tem muitos atributos: class, href, target, rel, aria-label, title, data-bs-toggle, data-bs-title, data-bs-placement, data-bs-offset, data-bs-template, data-bs-custom-class e data-bs-custom-trigger.
Além disso, os valores de cada atributo também contribuem para aumentar o tamanho e a complexidade da tag.
Se o website ou aplicação tem suporte à internacionalização, por exemplo, alguns valores são recuperados de arquivos de propriedades e disponibilizados por meio de métodos GET de um objeto Model ou DTO. Nesses casos, geralmente é necessário uma chamada de método que pode ser longa e complexa. Exemplo:
data-bs-title="<?= $pageConfig->getProperty('copy-code-button.additional-information') ?>"
(exemplo de código em PHP)
Dessa forma, sem a técnica adequada, criar tooltips pode deixar o código caótico e difícil de administrar. Por esse motivo, os botões da Página de Teste que utilizam ícones foram criados com a seguinte estrutura:
Em rosa, estrutura dos Icon Buttons da Página de Teste.
Em laranja, atributo da tooltip Bootstrap.
A imagem abaixo exibe o código real de um Icon Button da Página de Teste. A seta vermelha indica o local reservado aos atributos da tooltip Bootstrap:
- O atributo href define o destino do botão. No exemplo acima, o canal do YouTube togtec.
- O par atributo-valor target="_blank" garante que o link será aberto em uma nova aba do navegador.
- O par atributo-valor rel="noopener noreferrer" é relacionado à segurança e deve estar presente em todos os links que têm como destino uma página externa.
- O atributo aria-label define o texto que será lido pelo software leitor de tela.
- O atributo title define a mensagem que será exibida aos usuários com o JavaScript desabilitado no navegador — aos usuários com JavaScript habilitado será exibida a mensagem definida na tooltip Bootstrap.
- O par atributo-valor aria-hidden="true" indica ao software leitor de tela que o elemento deve ser ignorado — neste caso, o ícone é puramente decorativo, pois a informação acessível já está presente no aria-label da tag <a>.
noopener impede que a página aberta tenha acesso à janela de origem.
noreferrer impede o envio do endereço da página atual para o site de destino.
No exemplo acima, é importante notar a mensagem entre parênteses — opens in a new tab — essencial para que usuários que utilizam navegação assistiva saibam que o link será aberto em uma nova aba do navegador.
🚨 Atenção: A tooltip do botão LinkedIn já está parcialmente implementada e funcional — ela será utilizada em testes que faremos nos Capítulos 11 e 12.
Ao internacionalizar uma aplicação, é necessário escolher entre duas abordagens:
- Plugins de tradução.
- Versões independentes do conteúdo.
Plugins: utilizar plugins de tradução permite criar o conteúdo uma única vez e, de forma instantânea, exibi-lo em vários idiomas.
É a solução perfeita para o mundo corporativo que anseia por produtividade.
Entretanto, oferece menos controle, risco de traduções equivocadas e dificuldade no ajuste de nuances culturais.
Versões: por outro lado, criar versões independentes do conteúdo significa criar o mesmo conteúdo várias vezes — uma para cada idioma.
O processo é manual e lento, mas a qualidade é incrível!
Os Flag Buttons foram projetados para operar com versões independentes do conteúdo.
Para criar uma experiência de navegação agradável, a barra de navegação da Página de Teste possui dois Flag Buttons que aplicam estilização condicional, tornando assim a interface language-aware.
🔎 Passo a passo
Toda página possui o idioma declarado no atributo lang da tag <html>. Com base nesse valor, as regras condicionais do CSS aplicam automaticamente os estilos correspondentes a cada idioma:
Se o idioma declarado é Português: <html lang="pt-BR">
- a bandeira do Brasil recebe opacity: 1 — aparentando estar “acesa"
- a bandeira dos EUA recebe opacity: 0.7 — aparentando estar “apagada"
Se o idioma declarado é Inglês: <html lang="en-US">
- a bandeira do Brasil recebe opacity: 0.7 — aparentando estar “apagada"
- a bandeira dos EUA recebe opacity: 1 — aparentando estar “acesa"
O código abaixo define o comportamento visual das bandeiras com base no idioma da página e na interação do usuário:
/*** flag animation (turn on/turn off) ***/
.flag-container .brazil, .flag-container .us {
transition: opacity 0.3s ease;
}
/* initial state by language */
html[lang="pt-BR"] .flag-container .brazil { opacity: 1; }
html[lang="pt-BR"] .flag-container .us { opacity: 0.7; }
html[lang="en-US"] .flag-container .brazil { opacity: 0.7; }
html[lang="en-US"] .flag-container .us { opacity: 1; }
/* the flag under the mouse turns on */
html[lang="pt-BR"] .flag-container a:hover,
html[lang="en-US"] .flag-container a:hover {
opacity: 1;
}
/* turn off the other one */
.flag-container:hover a:not(:hover) {
opacity: 0.7;
}
/*** end flag animation (turn on/turn off) ***/A imagem abaixo exibe o código real de um Flag Button da página de teste. A seta vermelha indica o local reservado aos atributos da tooltip Bootstrap:
- O atributo class identifica o botão, permitindo que as regras condicionais do CSS apliquem o estilo correspondente ao idioma da página.
- O atributo href define o destino do botão. No exemplo acima, a página que exibe a versão Português Brasil do conteúdo.
- O atributo aria-label define o texto que será lido pelo software leitor de tela.
- O atributo title define a mensagem que será exibida aos usuários com o JavaScript desabilitado no navegador — aos usuários com JavaScript habilitado será exibida a mensagem definida na tooltip Bootstrap.
- O atributo src define o endereço do arquivo de imagem usado no botão — no exemplo acima, a bandeira do Brasil, presente na pasta app.image.
- O atributo alt é responsável por fornecer descrição a leitores de tela e exibir texto alternativo em caso de falha no carregamento da imagem. No exemplo acima, encontra-se vazio ("") em virtude de:
- O atributo aria-label fornecer a informação necessária à tecnologia assistiva, como o software leitor de tela.
- O botão possuir um rótulo textual próprio (“PT-BR”), o que permite sua identificação mesmo em caso de falha no carregamento da imagem.
- O par atributo-valor aria-hidden="true" indica que a imagem deve ser ignorada por tecnologia assistiva, como o software leitor de tela. Essa é uma configuração básica em botões que possuem texto visível e imagem meramente decorativa.
Segundo os padrões internacionais de acessibilidade, o atributo alt deve estar sempre presente — mesmo que seu valor seja vazio ("").
No início da tag <main> da Página de Teste, o link que leva à página Autor será associado à tooltip.
A imagem abaixo exibe o código real do link. A seta vermelha indica o local reservado aos atributos da tooltip Bootstrap:
- O atributo href define o destino do link. No exemplo acima, a versão em Inglês da página Autor.
- O atributo aria-label define o texto que será lido pelo software leitor de tela.
- O atributo title define a mensagem que será exibida aos usuários com o JavaScript desabilitado no navegador — aos usuários com JavaScript habilitado será exibida a mensagem definida na tooltip Bootstrap.
👉 Existe uma diferença na estrutura do código do link em relação ao código dos botões vistos anteriormente: A tag de fechamento </a> foi posicionada logo após o nome do autor (Tog), para evitar que a quebra de linha crie um espaço em branco entre o nome do autor e a vírgula, ao renderizar a página no navegador.
No início da tag <main> da Página de Teste, após o link que leva à página Autor, existem cinco logotipos de tecnologia que serão associados a tooltips.
A imagem abaixo exibe o código real de um Logo da Página de Teste. A seta vermelha indica o local reservado aos atributos da tooltip Bootstrap:
- O atributo class associa a imagem à classe tec-icon — responsável por controlar seu tamanho, comportamento visual e animação.
- O atributo src define o endereço do arquivo de imagem — no exemplo acima, o logotipo do Spring Framework, presente na pasta app.image.
- O atributo alt é utilizado pelo software leitor de tela para transmitir o significado da imagem ao usuário. Além disso, é exibido quando a imagem não pode ser carregada.
- O atributo title define a mensagem que será exibida aos usuários com o JavaScript desabilitado no navegador — aos usuários com JavaScript habilitado será exibida a mensagem definida na tooltip Bootstrap.
🚨 Atenção: As tooltips dos logos Angular e Linux já estão parcialmente implementadas e funcionais — elas serão utilizadas em testes que faremos nos Capítulos 8, 9 e 13.
4. Criando uma tooltip Bootstrap
Tecnicamente falando, a tooltip Bootstrap é criada em três etapas:
- Definição do gatilho;
- definição do conteúdo textual;
- inicialização por meio de código JavaScript.
Por questão de organização, este capítulo trata apenas da definição do gatilho e da definição do conteúdo textual. A inicialização da tooltip por meio de código JavaScript é abordada apenas no Capítulo 5.
🚨 Atenção: Antes de testar a tooltip, é necessário concluir as três etapas — caso contrário, o usuário não verá nada!
O gatilho é o elemento HTML que dispara a tooltip. Para definir um elemento como gatilho, é necessário adicionar ao elemento o par atributo-valor data-bs-toggle="tooltip" (abaixo, em destaque, linha 2):
<a href="https://getbootstrap.com/"
data-bs-toggle="tooltip"
>
<i class="bi bi-bootstrap-fill"></i>
</a>versão pedagógica
(não deve ser testada ainda)
Por padrão, apenas tooltips com conteúdo textual são exibidas. De acordo com a documentação oficial do Bootstrap, o conteúdo textual da tooltip pode ser definido por meio dos atributos title ou data-bs-title.
🔎 title
O atributo title é um atributo global do HTML, utilizado para fornecer informação complementar sobre um elemento.
Quando presente, o navegador pode exibir seu valor no momento em que o usuário passa o ponteiro do mouse sobre o elemento.
Embora funcione como a tooltip nativa do navegador, não permite controlar a aparência, direção ou distância.
Além disso, apresenta um delay fixo em sua exibição (controlado pelo navegador) que aumenta o tempo de resposta e transmite ao usuário a impressão de lentidão.
Mesmo assim, é uma alternativa interessante para exibir informação complementar a usuários que navegam com o JavaScript desabilitado no navegador.
🔎 data-bs-title
O atributo data-bs-title é um data attribute HTML interpretado pelo Bootstrap.
É utilizado exclusivamente por tooltips Bootstrap para definir o conteúdo textual.
🔎 Como funcionam?
Por padrão, o Bootstrap exibe na tooltip o valor definido no atributo data-bs-title. Entretanto, se o elemento gatilho não possui data-bs-title, a tooltip exibe então o valor do atributo title.
🔎 Então, devo utilizar apenas title, certo?
A princípio sim, afinal, utilizar apenas title é mais simples, prático e elegante — além de evitar no código dois atributos com a mesma função e com o mesmo valor.
Entretanto, utilizar apenas title gera acoplamento, pois um componente Bootstrap (a tooltip) passa a depender de um atributo global originalmente adicionado ao elemento gatilho para ativar um comportamento padrão do navegador (a tooltip nativa).
👉 Se houver mudança na documentação de requisitos da aplicação e o title for removido, a tooltip Bootstrap também deixa de funcionar!
🔎 Solução adotada
O Projeto Página de Teste utiliza os dois atributos para definir o conteúdo textual das tooltips:
- title para exibir informação complementar a usuários com o JavaScript desabilitado no navegador — tooltip nativa.
- data-bs-title para exibir informação complementar por meio de tooltips Bootstrap.
👉 Embora seja possível definir valores diferentes para title e data-bs-title, isso na prática não faz sentido! O ideal é que todos os usuários tenham acesso à mesma informação.
Sendo assim, o Projeto Página de Teste utiliza o mesmo valor para ambos os atributos, o que sem dúvida deixa o código menos elegante, porém, menos acoplado e mais simples de refatorar e manter no futuro.
O código abaixo mostra um exemplo pedagógico — em destaque, definição do gatilho e definição do conteúdo textual.
<a href="https://getbootstrap.com/"
title="Bootstrap"
data-bs-toggle="tooltip"
data-bs-title="Bootstrap"
>
<i class="bi bi-bootstrap-fill"></i>
</a>versão pedagógica
(não deve ser testada ainda)
5. Inicializando as tooltips por meio de código JavaScript
Por questões de desempenho, as tooltips são opcionais e devem ser inicializadas manualmente. Entretanto, é necessário decidir em quais dispositivos elas serão inicializadas.
Essa decisão cabe ao desenvolvedor, pois depende das características do projeto, do perfil dos usuários e exige trade-off (troca em que se ganha algo desejado, mas também se sacrifica algo de valor).
Para encontrar a melhor solução, é preciso analisar algumas premissas e entender o comportamento das tooltips nos diferentes tipos de dispositivos.
As tooltips são pequenas caixas de texto associadas a um elemento HTML — geralmente um link, imagem ou botão — que são exibidas, na maioria das vezes, quando o usuário passa o ponteiro do mouse sobre o elemento, caracterizando assim o estado de hover.
Isso melhora a experiência de navegação, pois permite ao usuário entender os elementos da página antes de clicá-los.
Entretanto, dispositivos de tela touch (como celulares e tablets) não possuem mouse e, portanto, não oferecem o estado de hover. Isso torna as tooltips pouco funcionais nesses dispositivos, podendo em alguns casos deteriorar a experiência de navegação do usuário.
🔎 Dinâmica de um link associado a tooltip
No computador, ao posicionar o ponteiro do mouse sobre um botão com ícone, a tooltip é exibida e permanece assim até que o usuário retire o ponteiro do mouse de cima do botão.
Isso significa, na prática, que o usuário controla o tempo de exibição da tooltip — tendo assim o tempo que desejar para realizar a leitura.
Esse comportamento melhora a experiência de navegação, pois, antes de efetuar o clique, o usuário já sabe o destino do botão.
No celular ou tablet, o usuário apenas imagina o destino do botão e clica, desencadeando dois processos em simultâneo:
- O botão dispara a tooltip, tornando-a visível.
- O usuário é levado para a próxima página.
Isso significa, na prática, que a tooltip é exibida antes de a próxima página ser renderizada, permanecendo visível por um curto espaço de tempo — geralmente, tempo suficiente para ser notada, mas não para ser lida.
Esse comportamento frustra o usuário, deixando-o com uma sensação de perda.
🔎 Dinâmica de uma imagem associada a tooltip
No computador, ao posicionar o ponteiro do mouse sobre uma imagem, a tooltip é exibida; ao retirar o ponteiro do mouse de cima da imagem, a tooltip é omitida. Não importa se o usuário clicou ou não!
Esse comportamento dá ao usuário uma sensação de normalidade.
No celular ou tablet, ao clicar na imagem, a tooltip é exibida e permanece na tela até que o usuário efetue outro clique fora dela.
Esse comportamento transmite ao usuário a impressão de haver algo "quebrado" na interface!
Inicializar tooltips apenas em dispositivos de tela convencional (non-touchscreen) evita deteriorar a experiência de navegação dos usuários do mundo mobile.
Entretanto, ao mesmo tempo, impede a exibição de informação complementar aos usuários de dispositivos híbridos — como laptops que permitem a navegação por mouse, mas também possuem tela touch.
O projeto Página de Teste inicializa tooltips apenas em dispositivos de tela convencional (non-touchscreen), priorizando a navegação em computadores desktop, tablets e celulares.
Entretanto, o atributo title exibe a mesma informação das tooltips em dispositivos de tela híbrida.
🔎 Trade-off
- O atributo title, ao contrário da tooltip Bootstrap, não permite controlar a aparência, direção ou distância.
- Utilizar tooltips pode trazer algum grau de desconforto a usuários de tecnologia assistiva.
Alguns leitores de tela, por exemplo, podem duplicar ou triplicar a informação da tooltip, mesmo em elementos sem o atributo title.
É possível evitar isso utilizando apenas links textuais que não precisam de tooltips e são lidos uma única vez, mas isso é inadequado em projetos que se valem da aparência para atrair e despertar a atenção do público-alvo.
🔎 Código
O código abaixo inicializa as tooltips apenas em dispositivos de tela convencional (non-touchscreen):
function initializeTooltipsOnlyOnNonTouchDevices() {
// checks whether the device supports touch events
function isTouchDevice() {
let touch = false;
if ('ontouchstart' in window) { touch = true; }
if (navigator.maxTouchPoints > 0) { touch = true; }
if (navigator.msMaxTouchPoints > 0) { touch = true; }
return touch;
}
// initialize tooltips only on non-touch devices
if (isTouchDevice()) {
return;
} else {
const triggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...triggerList].map(function (el) {
return new bootstrap.Tooltip(el);
});
}
}
// automatically run when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
initializeTooltipsOnlyOnNonTouchDevices();
});(presente no arquivo main.js da pasta app.js)
👉 Entre as linhas 1 e 26, temos uma função declarada: initializeTooltipsOnlyOnNonTouchDevices (acima, linha 1).
Ela verifica se o dispositivo é touch (acima, linha 16).
- Se for, simplesmente retorna sem executar nada (acima, linha 17).
- Se não for, inicializa uma tooltip Bootstrap para cada elemento HTML que possui o par atributo-valor data-bs-toggle="tooltip" (acima, em destaque, linha 20).
👉 Entre as linhas 28 e 31, a função anônima — ()=> { ... } — é registrada como ouvinte do evento DOMContentLoaded — que é disparado assim que o navegador termina de carregar e montar a estrutura HTML (DOM).
Quando o evento ocorre, a função anônima é avisada e executa a função responsável por inicializar as tooltips (acima, linha 30).
Caso o leitor julgue necessário por algum motivo, o código abaixo inicializa as tooltips em todos os dispositivos:
function initializeTooltipsOnAllDevices() {
const triggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...triggerList].map(function (el) {
return new bootstrap.Tooltip(el);
});
}
// automatically run when the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
initializeTooltipsOnAllDevices();
});Para utilizá-lo, basta copiá-lo e colá-lo no arquivo main.js da pasta app.js — nesse caso, o conteúdo atual do arquivo deve ser excluído.
6. Configurando as tooltips da Página de Teste
Com o código JavaScript que inicializa tooltips concluído, finalmente podemos configurar e testar as tooltips da Página de Teste.
Entretanto, antes de começar, é importante relembrar e destacar alguns pontos:
👉 duas páginas index
O Projeto Página de Teste possui duas páginas index:
- index.html → exibe a versão em Inglês do conteúdo.
- pt/index.html → exibe a versão em Português do conteúdo.
Sendo assim, para cada elemento da página index que exibe informação complementar ao usuário, temos de configurar e testar duas tooltips — uma para cada idioma.
👉 exemplos somente em Português
Este capítulo demonstra como configurar e testar apenas a versão em Português das tooltips. Fica a cargo do leitor, portanto, configurar e testar a versão em Inglês.
Entretanto, se você ainda não fala Inglês, não se preocupe! Nesse caso, ao configurar a versão em Inglês das tooltips, basta ter em mente o seguinte:
- Todos os elementos da Página de Teste que serão associados a tooltips possuem o atributo title.
- O atributo title (já presente) e o atributo data-bs-title (que será adicionado agora) devem possuir o mesmo valor.
Sendo assim, para definir o conteúdo textual da tooltip em Inglês, basta utilizar o valor de title em data-bs-title.
O código abaixo configura a tooltip do link que leva à página Autor — em destaque, definição do gatilho e definição do conteúdo textual:
<!-- start link -->
<p class="post-author mt-4 mb-0">
Por
<a href="autor.html"
aria-label="Conheça mais sobre o autor"
title="Conheça mais sobre o autor!"
data-bs-toggle="tooltip"
data-bs-title="Conheça mais sobre o autor!"
>
Tog</a>,
</p>
<p class="posting-date">10/Nov/2025</p>
<!-- end link -->versão funcional
(testar na página pt/index.html)
Para testar, basta adicionar os atributos data-bs-toggle e data-bs-title, salvar e executar um refresh na janela do navegador (F5) — antes de configurar a versão em Inglês da tooltip, lembre-se de que o valor dos atributos title e data-bs-title devem ser iguais.
🔎 Resultado ao testar no navegador
👉 Cores sóbrias; cantos arredondados; centralizada; posicionada acima do link sem obstruir o conteúdo; excelente contraste; simplesmente perfeita!
O código abaixo configura a tooltip do botão GitHub — em destaque, definição do gatilho e definição do conteúdo textual:
<!-- GitHub button -->
<a href="https://github.com/togtec"
target="_blank"
rel="noopener noreferrer"
aria-label="Visite-me no GitHub (abre em uma nova aba)"
title="Visite-me no GitHub"
data-bs-toggle="tooltip"
data-bs-title="Visite-me no GitHub"
>
<i class="bi bi-github"
aria-hidden="true"
>
</i>
</a>versão funcional
(testar na página pt/index.html)
Para testar, basta adicionar os atributos data-bs-toggle e data-bs-title, salvar e executar um refresh na janela do navegador (F5) — antes de configurar a versão em Inglês da tooltip, lembre-se de que o valor dos atributos title e data-bs-title devem ser iguais.
🔎 Resultado ao testar no navegador
👉 Uma tragédia em termos de web design: obstrui o logotipo da aplicação, falta de contraste visual, difícil de enxergar!
Nos próximos capítulos, aprenderemos a configurar a aparência, direção e distância, e transformaremos nossas tooltips Bootstrap em verdadeiras obras de arte!
7. Definindo a direção
No exemplo anterior, a tooltip Bootstrap do botão GitHub sobrepôs a barra de navegação, obstruindo assim o logotipo da aplicação.
A sobreposição também cria um problema crônico de falta de contraste que dificulta a percepção da tooltip, deteriorando a experiência de navegação do usuário.
Em situações como essa, a melhor solução é modificar a direção da tooltip por meio do atributo data-bs-placement, que aceita quatro valores:
Superior (top), direita (right), inferior (bottom) e esquerda (left). Exemplo:
- data-bs-placement="top"
- data-bs-placement="right"
- data-bs-placement="bottom"
- data-bs-placement="left"
O atributo data-bs-placement utiliza a palavra placement para indicar a sua função. Em Português, placement significa posicionamento.
Esse atributo define a posição da tooltip em relação ao elemento gatilho. Sendo assim, esse capítulo poderia se chamar: Como definir a posição.
Entretanto, a documentação do Bootstrap utiliza outro termo: directions (direções). Segundo a documentação oficial, existem quatro direções possíveis: top, right, bottom e left.
Sendo assim, esse post utiliza a palavra direção em conformidade com a documentação oficial.
O código abaixo define direção inferior na tooltip do botão GitHub:
<!-- GitHub button -->
<a href="https://github.com/togtec"
target="_blank"
rel="noopener noreferrer"
aria-label="Visite-me no GitHub (abre em uma nova aba)"
title="Visite-me no GitHub"
data-bs-toggle="tooltip"
data-bs-title="Visite-me no GitHub"
data-bs-placement="bottom"
>
<i class="bi bi-github"
aria-hidden="true"
>
</i>
</a>🔎 Resultado ao testar no navegador
data-bs-placement="bottom"
👉 Uma tragédia em termos de web design: mesmo na parte inferior, a tooltip é difícil de enxergar!
No próximo capítulo, aprenderemos a configurar a distância entre a tooltip e o botão!
8. Controlando a distância
O atributo data-bs-offset controla a distância da tooltip em relação ao elemento gatilho. O atributo recebe como valor uma string formada por dois números separados por vírgula. Exemplo:
- data-bs-offset="0,8"
- data-bs-offset="0,12"
- data-bs-offset="0,21"
O primeiro número (antes da vírgula) é o deslocamento (skidding). O segundo número (depois da vírgula) é a distância (distance).
👉 skidding e distance são os termos utilizados na documentação oficial do Bootstrap; os valores numéricos correspondem à quantidade de pixels.
🔎 distance
O código abaixo define uma distância de 21 pixels entre a tooltip e o botão GitHub:
<!-- GitHub button -->
<a href="https://github.com/togtec"
target="_blank"
rel="noopener noreferrer"
aria-label="Visite-me no GitHub (abre em uma nova aba)"
title="Visite-me no GitHub"
data-bs-toggle="tooltip"
data-bs-title="Visite-me no GitHub"
data-bs-placement="bottom"
data-bs-offset="0,21"
>
<i class="bi bi-github"
aria-hidden="true"
>
</i>
</a>
👉 Simplesmente perfeita!
🔎 skidding
O deslocamento (skidding) depende da direção da tooltip.
Se a direção da tooltip for superior (top) ou inferior (bottom):
- Um valor negativo desloca a tooltip para a esquerda.
- Um valor positivo desloca a tooltip para a direita.
deslocamento negativo (-30)
data-bs-offset="-30,21"
deslocamento positivo (30)
data-bs-offset="30,21"
Se a direção da tooltip for esquerda (left) ou direita (right):
- Um valor negativo desloca a tooltip para cima.
- Um valor positivo desloca a tooltip para baixo.
deslocamento negativo (-12)
data-bs-offset="-12,10"
deslocamento positivo (12)
data-bs-offset="12,10"
9. Removendo a seta
As tooltips Bootstrap são construídas a partir de um modelo de estrutura HTML. Na documentação oficial, esse modelo é chamado de template.
Por padrão, as tooltips Bootstrap utilizam o seguinte template:
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>A partir do template padrão, é possível criar um template sem a seta. Para isso, basta remover o elemento responsável pela renderização do arrow:
<div class="tooltip" role="tooltip">
<div class="tooltip-inner"></div>
</div>O próximo passo é transformar o HTML em string. Para isso, é necessário remover as quebras de linha, a indentação e colocar o código entre apóstrofos (aspas simples):
'<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>'Uma vez feito isso, é possível utilizar o novo template como valor do atributo data-bs-template:
data-bs-template='<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>'
🚨 Atenção: O atributo data-bs-template recebe como valor uma string que define um template HTML. O uso de aspas simples nas extremidades é uma convenção prática, adotada para evitar conflito com as aspas duplas presentes no HTML interno.
O código abaixo recria o último exemplo do capítulo anterior; desta vez, construindo a tooltip sem a seta:
<!-- Linux Logo -->
<img class="tec-icon"
src="../app.image/logo-linux.png"
alt="Linux"
title="Linux"
data-bs-toggle="tooltip"
data-bs-title="Linux"
data-bs-placement="right"
data-bs-offset="12,10"
data-bs-template='<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>'
>🔎 Resultado ao testar no navegador
10. Modificando a aparência
O Bootstrap controla as cores das tooltips por meio de duas variáveis CSS:
- --bs-tooltip-bg — controla a cor de fundo
- --bs-tooltip-color — controla a cor da fonte
Por padrão, o fundo da tooltip é preto e a fonte é branca. Entretanto, é possível criar uma classe CSS para sobrescrever o valor dessas variáveis.
O código abaixo cria uma classe CSS customizada para modificar a aparência da tooltip do link que leva à página Autor:
.link-tooltip {
--bs-tooltip-bg: #0477A2;
--bs-tooltip-color: #FFFFFF;
}(presente no arquivo main.css da pasta app.style)
Para utilizá-lo, basta adicionar o nome da classe CSS customizada ao elemento gatilho, por meio do atributo data-bs-custom-class. Exemplo: data-bs-custom-class="link-tooltip"
O código abaixo demostra o conceito:
<!-- start link -->
<p class="post-author mt-4 mb-0">
Por
<a href="autor.html"
aria-label="Conheça mais sobre o autor"
title="Conheça mais sobre o autor!"
data-bs-toggle="tooltip"
data-bs-title="Conheça mais sobre o autor!"
data-bs-custom-class="link-tooltip"
>
Tog</a>,
</p>
<p class="posting-date">10/Nov/2025</p>
<!-- end link -->🔎 Resultado ao testar no navegador
👉 O Link e a tooltip agora são da mesma cor!
11. Tooltips em links que abrem uma nova aba do navegador
Por padrão, uma tooltip Bootstrap se torna visível em duas ocasiões:
- Quando ocorre o estado de hover;
- quando ocorre o estado de foco.
Estado de hover: ocorre quando o usuário posiciona o ponteiro do mouse sobre o elemento gatilho — nesse caso, a tooltip se torna visível.
Estado de foco: ocorre quando o elemento gatilho recebe foco por meio da interação do usuário — normalmente ao ser alcançado pela tecla Tab ou por um clique do mouse. Nesse caso, a tooltip permanece visível enquanto o elemento gatilho mantiver o foco.
O estado de foco, embora seja essencial para a acessibilidade, pode gerar um comportamento indesejado em links que abrem uma nova aba do navegador.
No exemplo abaixo (que pode ser facilmente replicado na Página de Teste), o usuário posiciona o ponteiro do mouse sobre o botão LinkedIn. Nesse momento, ocorre o estado de hover — a tooltip Bootstrap se torna visível e permanece visível enquanto o ponteiro do mouse estiver sobre o botão:
tooltip do botão LinkedIn em estado de hover
Na imagem abaixo, ao efetuar o clique, ocorre o estado de foco — a partir de então a tooltip permanece visível enquanto o elemento gatilho mantiver o foco (mesmo que o usuário retire o ponteiro do mouse de cima do botão).
Entretanto, como o botão abre uma nova aba do navegador, a princípio, o usuário não percebe nada de estranho — sua atenção se volta completamente à aba LinkedIn recém-aberta:
Usuário observa aba LinkedIn recém-aberta.
Ao fechar a aba LinkedIn e retornar à aba anterior (Página de Teste), o usuário então se depara com a tooltip do botão LinkedIn em exibição:
tooltip do botão LinkedIn em estado de foco
Observe na imagem acima que o ponteiro do mouse não está sobre o botão LinkedIn; mesmo assim, a tooltip permanece visível devido ao estado de foco — o elemento gatilho recebeu foco no momento do clique.
Nesse caso, a tooltip permanece visível até que o usuário clique fora do elemento gatilho ou mova o foco via teclado (Tab) para o próximo elemento interativo.
Esse comportamento deteriora a experiência de navegação do usuário, que pode ficar confuso.
👉 É importante notar que o problema ocorre porque o botão LinkedIn abre uma nova aba do navegador — links que exibem o conteúdo na mesma aba, como o link que leva à página Autor, não apresentam esse comportamento.
🔎 Solução adotada
Acionar as tooltips apenas no estado de hover em elementos que abrem uma nova aba do navegador — como os Icon Buttons da Página de Teste.
Para isso, vamos adicionar ao elemento gatilho um novo atributo: data-bs-trigger.
O atributo data-bs-trigger recebe como valor uma string que define como a tooltip será acionada. Os valores possíveis são: manual, click, hover e focus. Exemplo:
- data-bs-trigger='hover focus'
- data-bs-trigger='hover'
👉 Os triggers que controlam a exibição da tooltip podem ser combinados ou definidos individualmente.
'manual'
Desativa todos os triggers automáticos da tooltip, delegando ao desenvolvedor o controle total sobre sua exibição e ocultação. Para utilizá-lo é necessário criar código JavaScript customizado para controlar a tooltip por meio dos métodos:
- tooltip.show();
- tooltip.hide();
- tooltip.toggle();
Este trigger não pode ser combinado com nenhum outro.
'click'
Exibe e oculta a tooltip quando o usuário clica no elemento gatilho.
'hover focus'
Valor padrão utilizado pelo Bootstrap — como visto acima, pode gerar um comportamento indesejado em links que abrem uma nova aba do navegador, pois a tooltip permanece visível após o clique em decorrência do estado de foco.
'hover'
Solução que vamos adotar agora — aciona a tooltip exclusivamente no estado de hover.
👉 Trade-off: restringir a exibição das tooltips ao estado de hover evita efeitos colaterais relacionados ao estado de foco; entretanto, essa decisão elimina o acesso à informação complementar para usuários que navegam exclusivamente via teclado.
O código abaixo aciona a tooltip do botão LinkedIn apenas no estado de hover:
<!-- Linkedin button -->
<a href="https://www.linkedin.com/in/togtec/?locale=en_US"
target="_blank"
rel="noopener noreferrer"
aria-label="Visit my LinkedIn profile (opens in a new tab)"
title="Visit my LinkedIn profile"
data-bs-toggle="tooltip"
data-bs-title="Visit my LinkedIn profile"
data-bs-placement="bottom"
data-bs-offset="0,21"
data-bs-trigger='hover'
>
<i class="bi bi-linkedin"
aria-hidden="true"
>
</i>
</a>Para testar, basta adicionar o par atributo-valor data-bs-trigger='hover' no elemento gatilho (botão LinkedIn), salvar e executar um refresh na janela do navegador (F5) — lembre-se de realizar o processo nas versões Português e Inglês da página index.
Ao clicar novamente no botão, é possível notar que a tooltip LinkedIn não mais permanece visível em decorrência do estado de foco.
12. Tooltips em links que abrem uma nova aba do navegador em dispositivos touch
Neste capítulo, vamos testar a solução adotada no capítulo anterior em um dispositivo de tela touch. Para isso, vamos aprender como utilizar as Ferramentas do Desenvolvedor.
O Google Chrome possui um conjunto de ferramentas conhecido como DevTools (Ferramentas do Desenvolvedor). Para acessá-lo, pressione F12:
Google Chrome DevTools (F12).
É importante notar, na imagem acima, que as ferramentas ativas estão destacadas em azul (Elements e Styles), enquanto as inativas aparecem em preto.
🚨 Atenção: O Google Chrome armazena de forma persistente o estado das Ferramentas do Desenvolvedor. Isso significa que o navegador mantém as configurações da última vez em que você as utilizou.
Sendo assim, tome cuidado para não ativar ferramentas por inércia. Antes de ativar qualquer ferramenta para acompanhar um exemplo, certifique-se de que a ferramenta em questão já não se encontra ativa em seu navegador!
Na imagem abaixo, o ponteiro do mouse posicionado sobre o botão Toggle Device Toolbar exibe a sua tooltip. Observe pela cor do botão (preta), que ele está inativo:
Quando o botão está inativo, como no exemplo acima, ao movermos o mouse sobre o viewport (parte superior da janela onde a página é renderizada), enxergamos um ponteiro em formato de seta:
Isso significa que estamos navegando no Modo Desktop (padrão). Entretanto, ao clicarmos no botão Toggle Device Toolbar, o Modo de Simulação de Dispositivos se torna ativo:
Modo de Simulação de Dispositivos
- Na imagem acima, o usuário clicou no botão Toggle Device Toolbar (1) — repare que o botão se tornou ativo (cor azul).
- Com o Modo de Simulação de Dispositivos ativo, a Device Toolbar se torna visível na parte superior da janela (2).
- O tradicional ponteiro em formato de seta deu lugar agora a um indicador de toque em formato de círculo (3), que simula um dedo humano.
O simulador de dispositivos permite testar eventos touch, o que nos possibilita ver, na prática, o comportamento das tooltips no ambiente mobile.
A simulação de dispositivos possui limitações. Ela deve ser utilizada para agilizar o processo de desenvolvimento, mas não substitui o teste em dispositivos reais!
Posicione o indicador de toque (círculo cinza) sobre o botão LinkedIn ():
Efetue o toque para abrir o LinkedIn em uma nova aba do navegador:
Clique no botão fechar () para retornar à aba anterior.
Observe na imagem acima um comportamento inesperado: a tooltip do botão LinkedIn permanece visível. Este exemplo demonstra duas coisas importantes:
- A solução adotada no capítulo anterior — acionar tooltips apenas no estado de hover em elementos que abrem uma nova aba do navegador — não é suficiente no mundo mobile.
- A solução adotada no Capítulo 5 — inicializar tooltips apenas em dispositivos de tela convencional (non-touchscreen) — ainda se faz necessária.
🔎 Funcionamento das tooltips em dispositivos de tela touch
Em celulares e tablets, ao efetuar o toque no botão LinkedIn, dois processos ocorrem em simultâneo:
- O botão dispara a tooltip, tornando-a visível.
- O perfil LinkedIn é carregado em uma nova aba do navegador.
Em um simulador de dispositivos, tudo acontece tão rápido que o usuário só percebe que a tooltip do botão LinkedIn permanece visível em um momento posterior — ao fechar a aba LinkedIn e retornar à aba anterior (Página de Teste).
Em um dispositivo touch real, é comum haver latência na rede móvel. Nesse caso, o usuário percebe a presença da tooltip antes mesmo da nova aba LinkedIn carregar, tornando o problema ainda mais evidente.
🤔 Por que a tooltip inicializou em um dispositivo de tela touch?
O código JavaScript da Página de Teste inicializa tooltips apenas em dispositivos de tela convencional (non-touchscreen) — vimos isso no Capítulo 5. Entretanto, no exemplo acima, não testamos em um dispositivo touch real; testamos em um simulador de dispositivos!
Qual é a diferença então?
Ao carregar a Página de Teste em um dispositivo touch real, assim que o navegador termina de carregar e montar a estrutura HTML (DOM), a função initializeTooltipsOnlyOnNonTouchDevices é chamada e, ao detectar que se trata de um dispositivo touch, retorna sem executar nada.
Dessa forma, as tooltips Bootstrap não são inicializadas e nunca se tornam visíveis — comportamento já discutido no Capítulo 5.
Entretanto, para carregar a Página de Teste em um Simulador de Dispositivos, as seguintes etapas são necessárias:
- Abrir o navegador.
- Carregar a Página de Teste.
- Pressionar o F12 para acessar as Ferramentas do Desenvolvedor.
- Clicar no botão Toggle Device Toolbar para ativar o Modo de Simulação de Dispositivos.
👉 O código responsável por inicializar (ou não) as tooltips é executado ao final da etapa b. Em outras palavras, as tooltips são inicializadas antes de ativarmos o Modo de Simulação de Dispositivos.
🔎 Solução
A solução é criar um pequeno hábito ao se utilizar as Ferramentas do Desenvolvedor (F12): ao ativar o Modo de Simulação de Dispositivos, execute também um refresh na janela do navegador (F5).
Dessa forma, a Página de Teste é carregada novamente e a função initializeTooltipsOnlyOnNonTouchDevices é executada já sob o contexto do Simulador de Dispositivos.
Com esse pequeno hábito, conseguimos tornar nossos testes precisos tanto no Modo Desktop (padrão) quanto no Modo de Simulação de Dispositivos.
Para conferir, atualize a página (F5) e clique novamente no botão LinkedIn. A tooltip não estará mais visível quando você retornar à aba anterior.
🚨 Atenção: Em um cenário de teste real, mais cedo ou mais tarde será necessário desabilitar o Modo de Simulação de Dispositivos para testar novamente no Modo Desktop (padrão).
É possível fechar o Modo de Simulação de Dispositivos e retornar ao Modo Desktop (padrão) de duas maneiras:
- Clicando no botão Toggle Device Toolbar;
- clicando no botão Close.
Botão Toggle Device Toolbar (1).
Botão Close (2).
Após fechar o Modo de Simulação de Dispositivos — seja pelo botão Toggle Device Toolbar ou Close — é necessário executar um refresh na janela do navegador (F5).
Caso contrário, a versão da Página de Teste exibida continuará sendo a carregada no Modo de Simulação de Dispositivos — com as tooltips inativas.
👉 Somente após o refresh a Página de Teste volta a se comportar de acordo com o modo Desktop (padrão).
As Ferramentas do Desenvolvedor constituem um ambiente sensível, que pode facilmente induzir o desenvolvedor a interpretações equivocadas. Executar um refresh (F5) após qualquer alteração de configuração é a forma mais segura de evitar confusão durante os testes.
13. Transição de escala no estado de hover
Neste capítulo, vamos analisar a transição de escala no estado de hover dos logos da Página de Teste. O objetivo é verificar como se comportam no Modo Desktop (padrão) e no Modo de Simulação de Dispositivos.
Abra a Página Teste em uma nova janela do navegador — vamos testar primeiro o Modo Desktop (padrão).
👉 Se você optar por utilizar a janela do navegador utilizada no teste do capítulo anterior, feche as Ferramentas do Desenvolvedor (DevTools) e execute um refresh da página (F5).
Posicione o ponteiro do mouse sobre o logo Angular:
Ao posicionar o ponteiro do mouse sobre o logo, dois processos ocorrem em simultâneo:
- A tooltip se torna visível.
- Uma transição de escala no estado de hover aumenta o tamanho da imagem:
escala padrão
escala ampliada (hover)
👉 Ao retirar o ponteiro do mouse do logo Angular, a imagem retorna à escala padrão.
No desktop, a transição de escala no estado de hover é percebida como um comportamento natural da interface.
Ela acentua a previsibilidade e cria no usuário a sensação de normalidade durante a navegação.
Agora, vamos testar no Modo de Simulação de Dispositivos para ver o comportamento em tela touch:
Pressione F12 para abrir as Ferramentas do Desenvolvedor.
Ative o Modo de Simulação de Dispositivos — o botão Toggle Device Toolbar deve estar azul.
Pressione F5 para executar um refresh na janela do navegador — devemos realizar um refresh sempre que trocarmos de modo.
Posicione o indicador de toque sobre o logo Angular:
Ao efetuar o toque, observe que ocorre uma transição de escala no estado de hover — a imagem aumenta de tamanho:
👉 Ao efetuar um segundo toque fora do logo Angular, a imagem retorna à escala padrão.
Em dispositivos de tela touch, esse comportamento transmite ao usuário a impressão de haver algo "quebrado" na interface!
🔎 Solução
Desabilitar a transição de escala no estado de hover em dispositivos de tela touch — o mesmo procedimento aplicado às tooltips Bootstrap no Capítulo 5.
Os Logos da Página de Teste são associados à classe CSS tec-icon, responsável por controlar seu tamanho, comportamento visual e transição:
<!-- Angular Logo -->
<img class="tec-icon"
src="./app.image/logo-angular.png"
alt="Angular"
title="Angular"
data-bs-toggle="tooltip"
data-bs-title="Angular"
data-bs-placement="top"
data-bs-offset="0,14"
>.tec-icon-container .tec-icon {
height: 2.85rem;
width: auto;
transition: transform .3s ease;
}
.tec-icon-container .tec-icon:hover {
transform: scale(1.2);
}👉 Entre as linhas 1 e 5, temos a regra CSS que define a transição aplicada aos elementos HTML associados à classe .tec-icon:
- transition é uma propriedade CSS que define como a transição ocorre quando uma propriedade CSS sofre alteração.
- transform é o nome da propriedade CSS que será animada durante a transição.
- .3s define a duração da transição em segundos.
- ease define a função de temporização, controlando a aceleração e desaceleração do movimento.
👉 Entre as linhas 6 e 8, temos a regra CSS que define a alteração de escala aplicada aos elementos HTML associados à classe .tec-icon no estado de :hover:
- transform é a propriedade CSS que tem seu valor alterado no estado de hover.
- scale(1.2) é o valor — significa um aumento proporcional de 20% no tamanho do elemento.
Para desabilitar a transição de escala no estado de hover em dispositivos de tela touch, é necessário utilizar um código JavaScript que identifique esse tipo de dispositivo e sobrescreva o comportamento definido na regra .tec-icon:hover.
Em dispositivos de tela touch, o valor da propriedade transform deve ser redefinido de scale(1.2) para none !important. Exemplo:
/* valor padrão (desktop) */
.tec-icon-container .tec-icon:hover {
transform: scale(1.2);
}
/* valor sobrescrito em dispositivos de tela touch */
.tec-icon-container .tec-icon:hover {
transform: none !important;
}O !important é necessário para garantir que a regra aplicada em dispositivos de tela touch tenha prioridade sobre a regra original de hover.
No próximo capítulo, disponibilizo um código JavaScript que desabilita a transição de escala no estado de hover dos Logos em dispositivos de tela touch.
14. Considerações finais
Durante 13 capítulos, aprendemos o que são tooltips e quando utilizá-las; conhecemos o framework Bootstrap e o integramos a uma página HTML; configuramos o gatilho e o conteúdo textual das tooltips; desenvolvemos o código JavaScript para inicializá-las apenas em dispositivos de tela convencional; compreendemos como as tooltips se comportam em dispositivos de tela touch e desktop; configuramos direção, deslocamento e distância; criamos um template para remover a seta; modificamos a cor da fonte e a cor do fundo; configuramos tooltips em links que abrem uma nova aba do navegador; testamos nossa aplicação web em um simulador de dispositivos; e vimos como transições de escala no estado de hover deterioram a experiência de navegação dos usuários do mundo mobile.
👉 E tudo isso em um ambiente desafiador, responsivo e multi-idiomas — a Página de Teste.
Após concluir a jornada de aprendizado, é necessário agora consolidar os conhecimentos adquiridos.
O projeto Página de Teste contém 26 elementos HTML preparados para serem associados a tooltips:
- 10 Icon Buttons
- 10 Logos
- 4 Flag Buttons
- 2 Links
Neste momento, é fundamental criar a sua própria versão de tooltip para cada um desses elementos. Desenvolver a sua própria versão é a melhor forma de praticar, revisar e fixar os conceitos.
Desenvolver a sua própria versão permite também comparar o seu código com o de outros desenvolvedores. Comparar soluções é uma excelente forma de aperfeiçoar.
Geralmente, o processo de comparação gera novas ideias, novas abordagens e, em muitos casos, nos conduz de volta a etapa anterior: o aprendizado.
Dessa forma, encerro este artigo disponibilizando abaixo o link de download do projeto Página de Teste — Versão 4:
Download Página de Teste — Versão 4
Na versão 4 compartilho a minha implementação das tooltips Bootstrap, além de um código JavaScript que desabilita as transições de escala no estado de hover, em dispositivos de tela touch — assunto abordado no capítulo anterior.
Ao comparar os projetos, tenha em mente que o objetivo é apresentar novas ideias. Nesse contexto, a variedade e o exagero são intencionais e benéficos, pois ajudam a abrir novos caminhos no pensamento.
No entanto, ao desenvolver tooltips para um projeto real, seja discreto!
O projeto Página de Teste — Versão 4 é deliberadamente exagerado por razões pedagógicas e não foi criado para ser utilizado como referência de Design Visual para projetos comerciais.