1

Gostaria de saber, basicamente, como se faz esses balões que aparecem quando passamos o mouse por cima do ícone:

balao

  • Ele pode aparecer em qualquer posição da tela correto!?

  • Mas como alinhá-lo com o ícone?

9
  • Aqui onde trabalho o proxy não deixa ver a imagem, mas pela descrição, creio que você quer dizer tooltip (?) 5/07/2018 às 13:03
  • @MarceloBoni se for esse tooltip, ele é estilizado. Tem como fazer isso!?
    – rbz
    5/07/2018 às 13:05
  • Se eu conseguisse ver a imagem já ajudaria muito pra te dar uma resposta correta kkkk vou tentar visualizar pelo celular 5/07/2018 às 13:07
  • Se estiver utilzando Bootstrap já vem com tooltip é só incorporá-lo.
    – LeAndrade
    5/07/2018 às 13:08
  • Como pode ver aqui existem vários exemplos de tooltip estilizados. 5/07/2018 às 13:08

2 Respostas 2

3

Se 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>

12
  • Leandro, eu gostaria de saber como faz sem framework, pois tenho ferramentas web com estilos mínimos, então não convém usar um framework só para isso. Mas agradeço a dica!
    – rbz
    5/07/2018 às 13:34
  • 1
    Mas o exemplo que dei aqui não tem framework é CSS puro.
    – LeAndrade
    5/07/2018 às 13:35
  • Opa ! Agora que entendi! Boa! isso mesmo!
    – rbz
    5/07/2018 às 13:38
  • 1
    Aí eu estilizo e posiciono o balão onde quiser, certo !?
    – rbz
    5/07/2018 às 13:39
  • Aí vc vai estlizando ele como quiser, isto, no left, no top, no background-color se quiser outra cor, no color para a cor do texto, etc...
    – LeAndrade
    5/07/2018 às 13:40
3

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>

2
  • Netinho, eu gostaria de saber como faz sem framework, pois tenho ferramentas web com estilos mínimos, então não convém usar um framework só para isso. Mas agradeço a dica!
    – rbz
    5/07/2018 às 13:34
  • Eu que agradeço. Segue um exemplo com CSS puro. Caso seja o que queres, eu edito a resposta e incluo o código. jsfiddle.net/s7ph5kcu/3 Att. 5/07/2018 às 13:43

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .