Well, with the help of some people here in the stack I'm modifying my tooltip system, it's almost ready, but I'm having a problem.
When I use very large text in the 'masterTooltip-left' class of the tooltip bug, it does not line up correctly and therefore is not displayed. does anyone know how to solve this?
$(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><divclass='masterTooltip-rightw100'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>