Gostaria de saber, basicamente, como se faz esses balões que aparecem quando passamos o mouse por cima do ícone:
Ele pode aparecer em qualquer posição da tela correto!?
Mas como alinhá-lo com o ícone?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeSe vc estiver utilizando bootstrap siga a resposta do Netinho Santos, se não estiver utilizando dá para criar e estilizar com CSS puro mesmo.
p {
text-align: center;
margin-top: 50px;
font-size: 30px;
font-weight: bold;
}
p:hover ~ span {
display: block;
}
span {
display: none;
color: #fff;
background-color: red;
width: 13%;
padding: 10px;
border-radius: 4px;
position: relative;
top: -100px;
left: 60%;
}
<p>TEXTO</p>
<span>Informações</span>
Utilize tooltip
já incluído no Bootstrap, vê documentação.
Use o atributo data-placement
para definir a posição da dica na parte superior, inferior, esquerda ou no lado direito do elemento:
Dica: Você também pode usar o atributo data-placement com um valor "auto", que permitirá ao navegador decidir a posição da dica de ferramenta. Por exemplo, se o valor for "auto left", a dica de ferramenta será exibida no lado esquerdo quando possível, caso contrário, à direita. Fonte: https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
$('[data-toggle="tooltip"]').tooltip();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom" title="Atenção!"></i>
tooltip
(?)tooltip
, ele é estilizado. Tem como fazer isso!?tooltip
estilizados.