Display text contained in span in Hover

Question

I have the following html code below:

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

With the following codes 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;
}

Joining the two codes, it forms a small circle to show information to the user, where it should be displayed on hover, but it’s not working. I think I’m missing some function in javascript or in jQuery for it to be shown, but I do not know how to hover, the text contained within the span be shown.

Example:

Answer 1

You need to add a few lines in CSS to get what you want. I added the CSS below to handle <span> so that it is displayed correctly:

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.: added the jQuery $(".tooltips").css("left","200px"); just to position the element for better viewing. You can ignore it.

Watch the 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>

Answer 2

From what I understand, you want the circle to contain only the exclamation initially, and when the user hovers the mouse, the message is displayed.

So what you can do first is give a class to that span, for example: "message", and add the CSS attribute display:none. In Javascript add mouseover and mouseout events to the "tooltips" class you already have, which will be responsible for displaying and hiding the message when the user passes or removes the mouse from the exclamation circle.

$(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>

Just need to adjust the look of this tooltip, because in my opinion the result is a little strange to the eyes.