As dicas de ferramenta são uma característica comum no design moderno da web. Fornecem informação adicional sobre um elemento em particular numa página web quando um utilizador paira sobre ela. Adicionar uma dica de ferramenta à sua página web HTML é um processo simples que não requer muito esforço. Neste artigo, discutiremos como adicionar uma dica de ferramenta à sua página web HTML.
O primeiro passo para adicionar uma dica de ferramenta à sua página web é adicionar o texto da dica de ferramenta à sua marcação HTML. Pode fazer isto utilizando o atributo “title”. Este atributo é utilizado para adicionar texto a um elemento HTML que descreve a finalidade do elemento. O texto adicionado ao atributo de título será exibido quando um utilizador pairar sobre o elemento.
Passo 2: Estilizar o texto da dica de ferramenta
Depois de ter adicionado o texto da dica de ferramenta à sua marcação HTML, o passo seguinte é estilizá-lo. Pode usar CSS para dar estilo ao texto da dica de ferramenta, tal como alterar o tamanho da fonte, cor, e cor de fundo. Para tal, pode usar o selector de “título” no seu ficheiro CSS.
título {
tamanho da fonte: 14px;
}
Neste código, o selector “title” é utilizado para seleccionar o texto da dica de ferramenta, e a propriedade “font-size” é utilizada para alterar o tamanho da fonte para 14 pixels.
Para além de estilizar o texto da dica de ferramenta, também se pode personalizar a aparência da própria dica de ferramenta. Por defeito, o navegador exibirá o texto da dica de ferramenta numa pequena caixa quando o utilizador pairar sobre o elemento. Contudo, pode utilizar o CSS para personalizar a aparência desta caixa.
título {
cor de fundo: #f2f2f2;
}
Passo 4: Implementar uma ponta de ferramenta personalizada
Se quiser implementar a sua ponta de ferramenta personalizada, pode usar uma biblioteca JavaScript, tal como jQuery ou Bootstrap, para criar uma ponta de ferramenta personalizada. Isto permitir-lhe-á adicionar características avançadas à sua dica de ferramentas, tais como animações e estilos personalizados.
Adicionar uma dica de ferramenta à sua página HTML é uma forma fácil de fornecer informação adicional sobre um elemento na sua página. Seguindo os passos delineados neste artigo, pode rapidamente adicionar uma dica de ferramenta à sua página web e personalizá-la para corresponder ao design da sua página web. Com um pouco de criatividade, pode criar uma página web envolvente e interactiva que os seus utilizadores irão adorar.
Passar o texto em HTML pode ser conseguido utilizando o atributo “título”. O atributo “title” especifica informação extra sobre um elemento HTML. Quando o ponteiro do rato paira sobre o elemento, surge uma dica de ferramenta com o texto do título.
Para adicionar texto sobreposto a um elemento HTML, basta adicionar o atributo “title” à etiqueta de abertura do elemento e definir o valor para o texto desejado. Por exemplo, para adicionar texto de pairar a uma imagem, o código teria este aspecto:
Quando o utilizador pairar sobre a imagem, aparecerá uma dica com o texto “Este é o texto de pairar”.
Similarmente, o texto pairar pode ser adicionado a outros elementos HTML como links, botões, e campos de entrada adicionando o atributo “title” às suas etiquetas de abertura.
Vale a pena notar que o texto pairar não é acessível aos utilizadores que dependem de leitores de ecrã ou outras tecnologias de assistência. Por conseguinte, é importante fornecer texto alternativo (utilizando o atributo “alt”) que descreve o conteúdo do elemento para estes utilizadores.
Para adicionar uma dica de ferramenta em HTML utilizando Javascript, é possível seguir estes passos:
1. Primeiro, crie o elemento para o qual pretende que apareça uma dica de ferramenta. Este pode ser qualquer elemento HTML, tal como um botão ou um link.
2. Em seguida, crie um novo elemento que servirá de dica de ferramenta. Este pode ser um elemento `div` ou qualquer outro tipo de elemento que deseje.
3. definir a propriedade `posição` do elemento de dica de ferramenta para `absoluto`. Isto permitir-nos-á posicioná-la em relação ao elemento para o qual pretendemos ter uma dica de ferramenta.
4. definir a propriedade `display` do elemento tooltip para `none`. Isto irá assegurar que a dica de ferramenta seja escondida por defeito.
5. Adicione um ouvinte de eventos ao elemento para o qual pretende ter uma dica de ferramentas. Isto pode ser, por exemplo, um evento de “mouseover”.
6. no ouvinte do evento, defina a propriedade `display` do elemento de dica de ferramenta para `block`. Isto tornará a dica de ferramenta visível quando o utilizador pairar sobre o elemento.
7. Utilize as propriedades `offsetTop` e `offsetLeft` do elemento para o qual pretende ter uma dica de ferramenta para posicionar o elemento de dica de ferramenta. Pode utilizar estas propriedades para calcular a posição da ponta da ferramenta em relação ao elemento.
8. Finalmente, defina o texto do elemento de dica de ferramenta para a dica de ferramenta que pretende exibir.
Aqui está um exemplo de como poderá ser o código Javascript:
“`
elemento.const = document.getElementById(‘my-button’);
elemento.const = document.createElement(‘div’);
dica.de.instrumento.estilo.posição = ‘absoluto’;
dica.de.instrumento.estilo.exibição = ‘nenhum’;
document.body.appendChild(tooltip);
elemento.addEventListener(‘mouseover’, () => {
dica.de.instrumento.estilo.exibição = ‘bloco’;
dica.de instrumento.style.top = `0px`;
tooltip.style.left = `px`;
tooltip.textContent = ‘This is a tooltip’;
});
element.addEventListener(‘mouseout’, () => {
tooltip.style.display = ‘none’;
});
“`
Neste exemplo, estamos a criar um novo elemento `div` para servir de tooltip, e estamos a adicioná-lo ao elemento `body`. Estamos então a adicionar ouvintes de eventos ao elemento “my-button` para mostrar e esconder a dica de ferramenta quando o utilizador pairar sobre ela. Estamos a utilizar as propriedades `offsetTop` e `offsetLeft` para posicionar a dica de ferramenta em relação ao botão. Finalmente, estamos a definir o texto do elemento “tooltip” para “Este é um tooltip”.