Como tornar seu site atraente para os visitantes? Esta questão preocupa quase todos os proprietários de recursos da Internet: comerciantes, blogueiros, proprietários de pequenas e grandes empresas, viajantes e pessoas simplesmente criativas que têm algo a dizer ao mundo.
Por que um site deve ser bonito e funcional?
O número de visitas depende do tema do site e seu público-alvo, interesse das pessoas em determinado produto, investimento, promoção, conteúdo e muitos outros fatores. Mas não se pode negar que o site é "recebido pelas roupas". É a primeira e principal página do recurso que é o seu rosto, o cartão de visita, pelo qual o visitante deve entender se deseja gastar seu tempo em uma visualização mais aprofundada do conteúdo.
E não há espaço para erros! De acordo com a pesquisa de uma das universidades técnicas dos EUA, o visitante tem a primeira impressão do local em menos de um segundo. Em média, uma pessoa “digitaliza” um site em 3 segundos. Velocidade relâmpago, certo?!
Até 70% do sucesso do recurso depende da aparência da página principal. A primeira coisa que as pessoas notam élogo, mas o segundo é a navegação. E se tudo estiver mais ou menos claro com o logotipo, vale a pena quebrar a cabeça com a navegação, menu e conveniência da ergonomia do site. Surge uma pergunta razoável: "Como decorar seu site, torná-lo o mais funcional e conveniente possível, mas ao mesmo tempo bonito?" Há muitas ideias incomuns para oferecer, mas uma das mais interessantes são as dicas de ferramentas.
O que são dicas de ferramentas? Além de ser um ótimo mecanismo para melhorar a funcionalidade do site, as dicas de ferramentas são uma ferramenta que permite ao usuário ver uma explicação para uma determinada imagem ao passar o mouse sobre um ícone, palavra ou imagem.
Ferramentas para trabalhar com dicas de ferramentas
Bootstrap é a melhor ferramenta para criar dicas de ferramentas. É um conjunto de modelos fáceis de aprender para criar aplicativos e sites escritos em HTML, CSS, Sass e JavaScript.
Para ser específico, as dicas de ferramentas usam um dos elementos gráficos do template Bootstrap - Tooltip.
O framework Bootstrap foi criado para o "Twitter" e foi originalmente chamado de "Twitter Blueprint". Após algumas mudanças em 2012, recebeu uma grade de 12 colunas, tornou-se adaptável e adquiriu o nome familiar - Tooltip. Uma dica de ferramenta é um elemento que aparece quando você passa o mouse sobre um elemento específico na tela do monitor.
Criando uma dica
Você pode criar uma dica de ferramenta do Bootstrap usando atributosdados, bem como ativando os elementos "Java Script". Existem duas maneiras principais de criar uma dica de ferramenta HTML Bootstrap. A essência da primeira é aplicar o atributo e o título do atributo (título), que conterá o texto da dica. A dica de ferramenta aparecerá na parte superior (configuração padrão). Vale lembrar que a dica de ferramenta precisa ser inicializada, pois a inicialização automática foi preterida no "Twitter bootstrap" por motivos de desempenho.
Para inicializar as dicas de ferramentas, é usado JavaScript especial, no qual o método de dica de ferramenta é restaurado para todos os elementos que possuem um atributo. A essência do segundo método é ativar uma dica de ferramenta usando o código "JavaScript" com a participação da biblioteca jQuery escrevendo uma classe de ferramenta que inclui uma dica de ferramenta. O método é semelhante ao primeiro, exceto pelo método de seleção de elementos. Você pode habilitar dicas em "Java Script" da maneira mostrada abaixo.
Exemplo de dica de ferramenta do Bootstrap
Existem quatro opções principais para posicionar dicas de ferramentas: nas bordas esquerda e direita, e acima e abaixo do elemento.
Dica de cima
Dica certa
Dica na parte inferior
Dica para a esquerda
Usando dicas de ferramentas
Há muitos usos para o Bootstrap Tooltip. Você pode inserir dicas de ferramentas para que o usuário possa entender a tradução do texto de um idioma estrangeiro no texto. As dicas de ferramentas também podem ser usadas como uma ferramenta para ajudar o usuário a entender o significado dos botões no painel ao passar o mouse sobre eles. Os modelos Bootstrap Tooltip são frequentemente usados nos sites de várias organizações para criar uma assinatura de notícias da empresa. Isso mantém os clientes atualizados e também permite que os visitantes recebam novas informações, como taxas de desconto, ofertas, mudanças dentro da empresa.
Considere um exemplo em que um usuário precisa inserir seu endereço de e-mail para assinar um boletim informativo. A tarefa de garantir que o público do cliente assine as notícias é mais facilmente alcançada usando HTML5 e o atributo necessário. A dica de dica de ferramenta neste caso é necessária para que o usuário entenda a sequência de ações. Por exemplo, depois de inserir o endereço de e-mail, marquei a caixa: "Concordo em receber notícias da empresa no meu endereço de e-mail". Abaixo está um exemplo do código do formulário.
Instalar este código no HTML Bootstrap Tooltip é fácil. Mas os benefícios são significativos. Agora os consumidores conhecem todas as novidades da empresa. Este é um tipo de publicidade gratuita.
Principais erros ao criar pop-upsdicas
O que fazer se o Bootstrap Tooltip não funcionar? O primeiro e principal erro em que o atributo tooltip não funcionará é se a tooltip não estiver habilitada. Para ativá-lo, você precisa usar um código especial.
Este método permite que você inicialize absolutamente todas as dicas de ferramentas em uma página da web.
O segundo erro comum é não ter jQuery no cabeçalho.
Existe uma condição necessária para que o link funcione corretamente - uma função de processamento de dados como "Java Script" deve ser especificada.
Propriedades da dica de ferramenta
Em sua essência, o componente Tooltip foi projetado para exibir dicas de ferramentas quando você move o ponteiro do mouse sobre uma ou outra parte da página. Mas, além da localização da dica de ferramenta à direita, esquerda e superior com a ajuda, a dica de ferramenta tem as seguintes propriedades:
- Ativo. Usar a propriedade true na dica de ferramenta do Bootstrap permite que dicas de ferramentas sejam exibidas, enquanto definir a mesma propriedade como false significa que nenhuma dica de ferramenta pode ser exibida.
- AutoPopDelay é a hora em que as dicas são exibidas.
- AutoPopDelay. Representa a quantidade de tempo que o cursor do mouse deve passar sobre um elemento para que a dica de ferramenta apareça.
- IsBaloon. Se o valor da dica de ferramenta HTML Bootstrap Tooltip for true, a dica de ferramenta mudará para uma nuvem.
- ToolTipIcon. Representa o caractere que é exibido na janeladicas.
Tooltipster
Para criar belas dicas de ferramentas, por exemplo, em um site criado em Wordpress, não é necessário conhecer a fundo a linguagem dos desenvolvedores web. Basta saber da existência de um plugin (extensão) como o Tooltipster. Pelo nome fica claro que este plugin é baseado no Tooltip e é surpreendentemente semelhante a ele em suas propriedades e propósitos. Para que serve este plug-in? Ele permite que você crie a marcação HTML necessária dentro da dica de ferramenta.
O trabalho do plugin é baseado na inserção de atalhos na página. Contém todos os atributos básicos do HTML Bootstrap Tooltip: conteúdo (data-tooltip-content), título, posição, gatilho, etc. Isso permite que você altere o tema, fonte, tamanho da dica de ferramenta, cor, insira uma imagem e muito mais.
