How to identify the end of the monitor with jquery

Question

How to identify the end of the monitor with jquery

Navigation

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

1

I'm putting together a Tooltip using jquery. It is 100% working, the problem is that when I put it on the right side of the monitor it does not appear. How do I make it identify if it has space? And if it does not have it open it on the left side.

Keep it running:

$(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><divclass='masterTooltip'title="TEXTO AQUI">MOUSE</DIV>

javascript jquery

asked by anonymous 02.12.2016 / 12:15

2 answers

0

Edited: Sorry, your tooltip is in an area and not in an element, so ...

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

02.12.2016 / 13:46

Doubt with parameter Policy to create div, label, and input

score 2 · Accepted Answer

Use the bootstrap tooltip that he already cares about doing this for you.

HTML Header

<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><scriptsrc="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(); 
});

Example fiddle: link

Documentation: link

Or if you prefer to continue with your logic, try this:

$(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
    });
  });
});