2

Qual a melhor forma de reduzir esse código abaixo a somente um bloco?

Estava usando somente um porem quando eu colocava o mouse sobre um icon o efeito hover aparecia para todos.

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

5
  • .tooltip-info é filho ou irmão de .icon-info? poderia por o HTML? 25/10/2016 às 13:51
  • @GuilhermeLautert editei Obrigado.
    – user27585
    25/10/2016 às 13:54
  • Você quer dizer de 6 blocos para 1, não ?
    – MagicHat
    25/10/2016 às 13:55
  • Na vdd 3 mesmo, e que considero ação show e hide como um bloco só. @MagicHat
    – user27585
    25/10/2016 às 14:01
  • Hum saquei...;)
    – MagicHat
    25/10/2016 às 14:03

2 Respostas 2

3

Você pode fazer isso criando um nova class genérica para todos os elementos.

Exemplo

utilizei a 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>

<div class="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>

Nota

  • Não á necessidade redeclarar a sentença apos chamar um evento no jQuery, pode usar chaining, pois ele retorna o this.
1
  • Perfeito, muto obrigado.
    – user27585
    25/10/2016 às 14:08
0

A maravilha do Jquery é justamente permitir selecionar praticamente tudo o que desejar sem ter que modificar o código html, segue abaixo alguns exemplos:

$('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>Lorem ipsum
    <span class="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>

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