1
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>
You’re reinventing the wheel, it already exists ready for
jQuery
. If you still want to build your tooltip, it would be nice to take a look at the tooltipjQuery
and see how it detects the screen size. You can download here: https://jqueryui.com/tooltip/– Ricardo Pontual
It needs jquery UI to work, and I don’t use it. It doesn’t pay to use it just for that.
– Hugo Borges