Display text contained in span in hover

Question

Display text contained in span in hover

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

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 CSS codes:

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;
}

Putting together the two codes, it forms a small circle to show information to the user, where it should be displayed in hover , but it is not working. I think I'm missing some function in javascript or jQuery so that it is displayed, but I do not know how to do it so that in hover , the text contained within span is displayed.

Example:

javascript html jquery css

asked by anonymous 28.09.2017 / 20:52

2 answers

0

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 to give a class for this span , for example: "message", and add the display:none attribute in CSS. In Javascript add mouseover and mouseout events to the class "tooltips" you already have, which will be responsible for displaying and hiding the message when the user passes or removes the mouse from the top of 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><aclass="tooltips" href="#"><strong>!</strong><span class="mensagem">Ingresse o máximo de informações possíveis para uma entrega acertiva</span></a>

You only need to adjust the look of this tooltip, because in my opinion the result is a bit strange to the eyes.

29.09.2017 / 16:53

How to load modal edit dynamically using Laravel? Mass file encoding conversion on linux

score 1 · Accepted Answer

You need to add some lines in the CSS to get what you want. I've added the CSS below to treat <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;
}

Note: I added jQuery $(".tooltips").css("left","200px"); only to position the element for better visualization. You can ignore it.

See 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/><aclass="tooltips" href="#"><strong>!</strong><span>Ingresse o máximo de informações possíveis para uma entrega acertiva</span></a>