How to identify the end of the monitor with jquery

Question

Guys I’m mounting a Tooltip using jquery. It is working 100%, the problem is that when I put it on the right side of the monitor it does not appear. How do I make him identify if he has space? And if he doesn’t have it open on the left side.

Keeps 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>
<div class='masterTooltip ' title="TEXTO AQUI">MOUSE</DIV>

Answer 1

Use the bootstrap tooltip that he already worries about doing it for you.

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

Fiddle example : https://jsfiddle.net/4r5dasjs/

Documentation : http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

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

Answer 2

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