2

Bom, com a ajuda de algumas pessoas aqui do stack eu estou modificando meu sistema de tooltip, ele esta quase pronto, porem estou tendo um problema.

Quando uso um texto muito grande na classe 'masterTooltip-left' o tooltip bug, ele não alinha direito e por isso não e exibido. alguém sabe como resolver isso?

$(document).ready(function() {

  $('.masterTooltip-right').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-right"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-right').hide();
  }).mousemove(function(e) {

    // Posição
    var mousex = e.pageX + 25;
    var mousey = e.pageY + -25;
    $('.tooltip-right').css({
      top: mousey,
      left: mousex
    });
  });


  $('.masterTooltip-left').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-left"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-left').hide();
  }).mousemove(function(e) {

    // Posição
    var mousex = e.pageX - 150;
    var mousey = e.pageY + -25;
    $('.tooltip-left').css({
      top: mousey,
      left: mousex
    });
  });
});
.tooltip-right, .tooltip-left {
    display: none;
    position: absolute;
    border: 1px solid #616161;
    background-color: #323232;
    border-radius: 4px;
    padding: 10px;
    color: #FFFFFF;
}
.tooltip-right::after {
    position: absolute;
    content: '';
    left: -20px;
    top: 3px;
    border: 10px solid transparent;
    border-right-color: #323232;
}
.tooltip-left:after {
    position: absolute;
    content: '';
    right: -10px;
    top: 3px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #323232;
}





.right {
  float: right;
}

.w100 {
  width: 100px;
  background-color: #0091FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class='masterTooltip-right w100' title="erro">MOUSE</div>

<div class='masterTooltip-left right w100' title="TEXTO AQUI">MOUSE</div>
<br><br><br>
<div class='masterTooltip-left right w100' title="sssssssssssssssssssss">BUG</div>

4
  • o bug é que o tooltip fica "sumindo e aparecendo"? se for, a forma mais simples de resolver isso é em vez de vc posicionar o tooltip na tela, colocar o tooltip como filho do elemento que disparou. assim o "mouseout" não vai acontecer se o mouse entrar dentro do tooltip. Commented 6/12/2016 às 20:04
  • ele fica sumindo porque não fica posicionado certo. O 'tooltip-right' funciona, já o 'tooltip-left' não, pois quando o texto e grande ele não fica a 10px do cursor. entendeu? a estrutura eu não quero mexer, pois assim ela e bem simples Commented 6/12/2016 às 20:24
  • então é isso mesmo que eu disse.. na verdade ele some pq o cursor entra dentro do tooltip e isso faz ele sair do elemento que dispara, por isso ele fecha. Commented 6/12/2016 às 20:25
  • hum, teria como vc alterar o código que eu postei com a sua solução? Commented 6/12/2016 às 20:26

2 Respostas 2

1

Fiz um alteração no javascript tem que dar uma arrematada nos cálculos pra ficar perfeito, mas basicamente to calculando com base no tamanho da palavra e se ela está em maiúscula ou minuscula

$(document).ready(function() {

  $('.masterTooltip-right').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-right"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-right').hide();
  }).mousemove(function(e) {

    $('.tooltip-right').each(function() {
      var mousex = 0;
      var mousey = e.pageY + -25;
      if ($(this).text()[0] == $(this).text()[0].toUpperCase()) {
        mousex = (e.pageX -10) + ($(this).text().length * 10)

      } else {
        mousex = (e.pageX) + ($(this).text().length * 7)
      }
      $(this).css({
        top: mousey,
        left: mousex
      })
    });
  });


  $('.masterTooltip-left').hover(function() {

    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip-left"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip-left').hide();
  }).mousemove(function(e) {

    // Posição
      $('.tooltip-left').each(function() {
      var mousex = 0;
      var mousey = e.pageY + -25;
      if ($(this).text()[0] == $(this).text()[0].toUpperCase()) {
        mousex = (e.pageX - 40) - ($(this).text().length * 10)

      } else {
        mousex = (e.pageX - 40) - ($(this).text().length * 7)
      }
      $(this).css({
        top: mousey,
        left: mousex
      })
    });
  });
});
.tooltip-right,
.tooltip-left {
  display: none;
  position: absolute;
  border: 1px solid #616161;
  background-color: #323232;
  border-radius: 4px;
  padding: 10px;
  color: #FFFFFF;
}
.tooltip-right::after {
  position: absolute;
  content: '';
  left: -20px;
  top: 3px;
  border: 10px solid transparent;
  border-right-color: #323232;
}
.tooltip-left:after {
  position: absolute;
  content: '';
  right: -10px;
  top: 3px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #323232;
}
.right {
  float: right;
}
.w100 {
  width: 100px;
  background-color: #0091FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div class='masterTooltip-right w100' title="ERRO">MOUSE</div>


<br>
<br>
<br>
<div class='masterTooltip-right w100' title="erro">MOUSE</div>



<div class='masterTooltip-left right w100' title="t">MOUSE</div>
<br>
<br>
<br>
<div class='masterTooltip-left right w100' title="ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss">BUG</div>

1
1

dá para aplicar um css transform de modo a compensar a largura variável.

html:

<div class="div1">
  <div class="masterTooltip w100" data-label="erro">MOUSE</div>
</div>

<div class="div2">
  <div class="masterTooltip right w100" data-label="TEXTO AQUI">MOUSE</div>
  <div class="masterTooltip right w100" data-label="sssssssssssssssssssss">BUG</div>
</div>

css:

.tooltip-left {
  transform: translateX(-100%);
}

.div1 {
  float: left;
  width: 50%;
}

.div2 {
  float: left;
  width: 50%;
  text-align: right;
}

.right {
  margin-left: auto;
  margin-right: 0;
}

.w100 {
  cursor: pointer;
  width: 100px;
  background-color: #0091FF;
  margin-bottom: 25px;
}

javascript:

$(document).ready(function() {

  var w = $('body').width();
  var h = $('body').height();

  $('.masterTooltip').hover(function(e) {
    var mouse = {x: e.clientX, y: e.clientY};
    var t = e.target;
    var title = $(t).attr('data-label');
    if (mouse.x > w / 2) {
      $('<p class="tooltip-left"></p>').html(title).appendTo('body').fadeIn('fast');
    }
    else {
      $('<p class="tooltip-right"></p>').html(title).appendTo('body').fadeIn('fast');
    }
  },
  function() {
    $('.tooltip-left').hide();
    $('.tooltip-right').hide();
  }).mousemove(function(e) {
    var mouse = {x: e.pageX, y: e.pageY};
    $('.tooltip-left').css({
      top: mouse.y - 25,
      left: mouse.x - 25,
    });
    $('.tooltip-right').css({
      top: mouse.y - 25,
      left: mouse.x + 25,
    });
  });
});

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 .