Reduce this jquery to only 1 block and not 3, how do I?

Navigation
2

What is the best way to reduce this code below to just one block?

I was using only one but when I hovered over an icon the hover effect appeared for everyone. 

$('.sidebar-chart-1 .icon-info').mouseover(function(){
		$('.sidebar-chart-1 .tooltip-info').show();
	});

	$('.sidebar-chart-1 .icon-info').mouseout(function(){
		$('.sidebar-chart-1 .tooltip-info').hide();
	});
// =====
	$('.distribuicao-fundamental-1 .icon-info').mouseover(function(){
		$('.distribuicao-fundamental-1 .tooltip-info').show();
	});

	$('.distribuicao-fundamental-1 .icon-info').mouseout(function(){
		$('.distribuicao-fundamental-1 .tooltip-info').hide();
	});
// =====
	$('.distribuicao-fundamental-2 .icon-info').mouseover(function(){
		$('.distribuicao-fundamental-2 .tooltip-info').show();
	});

	$('.distribuicao-fundamental-2 .icon-info').mouseout(function(){
		$('.distribuicao-fundamental-2 .tooltip-info').hide();
	});
<h3>Acumulado e Meta do ciclo atual (2016/17)
    <span class="icon-info fa fa-info-circle" aria-hidden="true"></span>
    <span class="tooltip-info">informações sobre o gráfico.</span>
</h3>
    
asked by anonymous 25.10.2016 / 15:48

2 answers

4

You can do this by creating a new generic class for all elements.

Example

I used the class show . 

$('.show .icon-info').mouseover(function(){
	$(this).parent().find('.tooltip-info').show();
}).mouseout(function(){
	$(this).parent().find('.tooltip-info').hide();
});
.tooltip-info{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="sidebar-chart-1 show">
  <i class="icon-info">SideBar</i>
  <div class="tooltip-info">
      test 1
  </div>
</div>

<div class="distribuicao-fundamental-1 show">
  <i class="icon-info">Descrição Funcionario</i>
  <div class="tooltip-info">
      test 1
  </div>
</div>

Note

25.10.2016 / 16:02
1

The wonder of Jquery is to allow you to select almost anything you want without having to modify the html code, here are some examples: 

$('h1 .icon-info').hover(function() {
  $(this) // representa exatamente o 'h1 .icon-info' que disparou o hover, mesmo que tenham outros iguais na pagina
  .siblings('.tooltip-info') // seleciona o seu irmão chamado '.tooltip-info'
  .toggle() // se estiver oculto mostra, se estiver visivel oculta.
  .css({
    top: $(this).offset().top + $(this).outerHeight(),
    left: $(this).offset().left
  }); // posiciona '.tooltip-info' em relação a posição deste 'h1 .icon-info' 
});

$('h2 .icon-info').hover(function() {
  $(this) // representa exatamente o 'h2 .icon-info' que disparou o hover, mesmo que tenham outros iguais na pagina
  .parent() // seleciona o elemento pai
  .find('.tooltip-info') // procura por '.tooltip-info' dentro do pai
  .toggle() // se estiver oculto mostra, se estiver visivel oculta.
  .css({
    top: $(this).offset().top + $(this).outerHeight(),
    left: $(this).offset().left
  }); // posiciona '.tooltip-info' em relação a posição deste 'h2 .icon-info' 
});

$('h3 .icon-info').hover(function() {
  $(this) // representa exatamente o 'h3 .icon-info' que disparou o hover, mesmo que tenham outros iguais na pagina
  .parents('div') // seleciona o primeiro div pai que encontrar
  .next('div') // seleciona o proximo div depois do div pai
  .find('.tooltip-info') // procura por '.tooltip-info' dentro do proximo div
  .toggle() // se estiver oculto mostra, se estiver visivel oculta.
  .css({
    top: $(this).offset().top + $(this).outerHeight(),
    left: $(this).offset().left
  }); // posiciona '.tooltip-info' em relação a posição deste 'h3 .icon-info'
});

$('div > .icon-info').hover(function() {
  $(this) // representa exatamente o 'div > .icon-info' que disparou o hover, mesmo que tenham outros iguais na pagina
  .next('.tooltip-info') // seleciona o proximo '.tooltip-info' depois de 'div > .icon-info'
  .toggle() // se estiver oculto mostra, se estiver visivel oculta.
  .css({
    top: $(this).offset().top + $(this).outerHeight(),
    left: $(this).offset().left
  }); // posiciona '.tooltip-info' em relação a posição deste 'div > .icon-info'
});
.tooltip-info {
  display: none;
  position: absolute;
  border: 1px solid red;
  padding: 10px;
  background: white;
  border-radius: 5px;
  box-shadow: 3px 3px 10px grey;
  font: 14px normal;
  margin-top: 8px;
}
.icon-info {
  cursor: pointer;
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1>Loremipsum<spanclass="icon-info fa fa-info-circle" aria-hidden="true"></span>
    <span class="tooltip-info">H1 Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</span>
</h1>

<h2>Lorem ipsum
  <span class="icon-info fa fa-info-circle" aria-hidden="true"></span>
  <div>
    <span class="tooltip-info">H2 Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</span>
  </div>
</h2>

<div>
  <h3>Lorem ipsum
    <span class="icon-info fa fa-info-circle" aria-hidden="true"></span>
  </h3>
</div>
<div>
  <span class="tooltip-info">H3 Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit.</span>
</div>

<div>
  Loren
  <span class="icon-info fa fa-info-circle" aria-hidden="true"></span>
  <span class="tooltip-info">Lorem sit amet,<br>consectetur adipiscing elit.</span>
  Ipsum
  <span class="icon-info fa fa-info-circle" aria-hidden="true"></span>
  <span class="tooltip-info">Ipsum sit amet,<br>consectetur adipiscing elit.</span>
  Dolor
  <span class="icon-info fa fa-info-circle" aria-hidden="true"></span>
  <span class="tooltip-info">Dolor sit amet,<br>consectetur adipiscing elit.</span>
</div>
    
26.10.2016 / 11:15
How do I only allow numbers and a special character in javascript? How to add item in array through a foreach?