1

Galera estou montando um Tooltip usando jquery. Ele está funcionando 100%, o problema é que quando coloco ele no lado direito do monitor ele não aparece. Como faço para que ele identifique se tem espaço? E se não tiver ele tem que abrir no lado esquerdo.

Segue ele funcionando:

$(document).ready(function() {

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

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

    // Get X Y coordinates
    var mousex = e.pageX + 25;
    var mousey = e.pageY + -25;
    $('.tooltip').css({
      top: mousey,
      left: mousex
    });
  });
});
.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #616161;
  background-color: #323232;
  border-radius: 4px;
  padding: 10px;
  color: #FFFFFF;
}
.tooltip::after {
  position: absolute;
  content: '';
  left: -20px;
  top: 3px;
  border: 10px solid transparent;
  border-right-color: #323232;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class='masterTooltip ' title="TEXTO AQUI">MOUSE</DIV>

2
  • Você está reinventando a roda, isso já existe pronto para jQuery. Se você ainda assim quiser montar o seu tooltip, seria legal dar uma olhada no tooltip do jQuery e veja como ele detecta o tamanho da tela. Dá pra baixar aqui: jqueryui.com/tooltip 2/12/2016 às 12:41
  • Ele precisa do jquery UI para funcionar, e eu não utilizo ele. Não compensa usar ele so por isso. 2/12/2016 às 12:44

2 Respostas 2

2
+50

Use o tooltip do bootstrap que ele já se preocupe em fazer isso por você.

Header HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Body HTML

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

JS File

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

Exemplo fiddle : https://jsfiddle.net/4r5dasjs/

Documentação : http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Ou se preferir continuar com sua lógica, tente isso:

$(document).ready(function() {
    // Pega a largura da pagina;
    var width = $(window).width();
  $('.masterTooltip').hover(function() {
    var title = $(this).attr('title');
    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>').html(title).appendTo('body').fadeIn('fast');
  }, function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').hide();
  }).mousemove(function(e) {
    // Pego a posição do elemento na página
    var position = $(e.currentTarget).position();
    var mousex,mousey;
    if((width - position.left) < 150){
        mousex = e.pageX - 150;
        mousey = e.pageY + -25;
    }else{
        mousex = e.pageX + 25;
        mousey = e.pageY + -25;
    }
    $('.tooltip').css({
      top: mousey,
      left: mousex
    });
  });
});
6
  • Muito bom sua resposta, porém queria manter o código o mais simples possível, e usar o bootstrap so para isso não compensa. Quero tentar fazer isso no código que estou usando. 5/12/2016 às 20:02
  • Da uma conferida no JS atualizado que eu fiz, acho que agora resolve seu problema jsfiddle.net/4r5dasjs/2
    – LuKs Sys
    6/12/2016 às 11:23
  • Bom tentei fazer isso com 2 tooltipo e ele da problema, veja só: jsfiddle.net/4r5dasjs/3 6/12/2016 às 11:47
  • 1
    Pronto!!! Agora você consegue colocar quantos tooltips quiser: jsfiddle.net/4r5dasjs/4
    – LuKs Sys
    6/12/2016 às 12:27
  • muito bom ,agora ficou legal :) estou tentando fazer a detinha mudar de lado agora :), jaja libero a sua recompensa, muito obrigado 6/12/2016 às 12:37
0

Editado: Desculpa, seu tooltip é em uma area e nao em um elemento, entao...

var element = document.querySelector('.tooltip');

...
.mousemove(function(e) {

    /* Ajuste a Cima ou a Baixo*/
    if (e.pageY + element.clientHeight + 8 > window.innerHeight) {
        element.style.top = (- element.clientHeight - 8) + "px";
    } else {
        element.style.top = "8px";
    }

    /* Ajuste a Esqueda ou a Direita */
    if (e.pageX + element.clientWidth + 8 > window.innerWidth) {
        element.style.left = (- element.clientWidth - 8) + "px" ;
    } else {
        element.style.left = '8px';
    }
});
2
  • oi, bom tentei da sua forma e não deu certo. Teria como aplicar sua solução ao código que postei? 2/12/2016 às 15:17
  • Amigo não estou conseguindo fazer isso funcionar. 2/12/2016 às 17:56

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 .