2

Eu tenho o seguinte código html abaixo:

<a class="tooltips" href="#"><strong>!</strong><span>Ingresse o máximo de informações possíveis para uma entrega acertiva</span></a>

Com os seguintes códigos CSS:

a.tooltips {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #fff;
    margin-left: 5px;
    background: #E7AF19;
    padding: 1px 10px;
    text-align: center;
    border-radius: 50%;
}

a.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #E7AF19;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

Juntando os dois códigos, ele forma um pequeno circulo para mostrar informações ao usuário, onde o mesmo deveria ser exibido no hover, mas não está funcionando. Creio eu que está faltando alguma função em javascript ou em jQuery para que o mesmo seja exibido, porém não sei como fazer para que no hover, o texto contido dentro do span seja exibido.

Exemplo:

inserir a descrição da imagem aqui

2 Respostas 2

1

Precisa adicionar algumas linhas no CSS para conseguir o que deseja. Adicionei o CSS abaixo para tratar o <span> de modo que ele seja exibido corretamente:

a.tooltips span{
    display: none;
    width: 120px;
}

a.tooltips:hover span{
    display: inline-block;
    position: absolute;
    background: #E7AF19;
    border-radius: 5px;
    padding: 5px;
    bottom: 150%;
    left: -52px;
}

Obs.: adicionei o jQuery $(".tooltips").css("left","200px"); apenas para posicionar o elemento para melhor visualização. Pode ignorá-lo.

Veja o snippet:

$(".tooltips").css("left","200px");
a.tooltips {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #fff;
    margin-left: 5px;
    background: #E7AF19;
    padding: 1px 10px;
    text-align: center;
    border-radius: 50%;
}

a.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #E7AF19;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

a.tooltips span{
    display: none;
	width: 120px;
}

a.tooltips:hover span{
    display: inline-block;
	position: absolute;
	background: #E7AF19;
	border-radius: 5px;
	padding: 5px;
	bottom: 150%;
	left: -52px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br /><br />
<br /><br />
<br /><br />

<a class="tooltips" href="#"><strong>!</strong><span>Ingresse o máximo de informações possíveis para uma entrega acertiva</span></a>

1
  • Deu certo! Muito obrigado pela ajuda e atenção. Commented 29/09/2017 às 17:53
0

Pelo que eu entendi, você quer que o círculo contenha somente a exclamação inicialmente, e quando o usuário passar o mouse, a mensagem é exibida.

Então o que você pode fazer primeiramente é dar uma classe para essa span, por exemplo: "mensagem", e adicionar no CSS o atributo display:none. No Javascript adicione eventos de mouseover e mouseout para a classe "tooltips" que você já tem, que serão responsáveis por exibir e esconder a mensagem quando o usuário passar ou retirar o mouse de cima do círculo de exclamação.

$(document).ready(function(){

  // Exibe span com a classe "mensagem" ao passar o mouse
	$(".tooltips").on("mouseover", function(){
  	$(this).find(".mensagem").show();
  });
  // Esconde a span com a classe "mensagem" ao retirar o mouse
  $(".tooltips").on("mouseout", function(){
  	$(this).find(".mensagem").hide();
  });
	

});
a.tooltips {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: #fff;
    margin-left: 5px;
    background: #E7AF19;
    padding: 1px 10px;
    text-align: center;
    border-radius: 50%;
}
.mensagem{
  display:none;
}
a.tooltips span:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #E7AF19;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="tooltips" href="#"><strong>!</strong><span class="mensagem">Ingresse o máximo de informações possíveis para uma entrega acertiva</span></a>

Só é preciso ajustar o visual desse tooltip, pois na minha opinião o resultado fica um pouco estranho aos olhos.

2
  • Seria exatamente isso que você disse, porem no hover do mouse, a exclamação não mudaria nada, somente iria aparecer esse balão em cima dele com o texto contido do span. Commented 29/09/2017 às 16:27
  • Anexei junto a pergunta um exemplo, que no caso seria o resultado final do qual quero ter. Commented 29/09/2017 às 16:31

Você deve fazer log-in para responder a esta pergunta.

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