Bom, com a ajuda de algumas pessoas aqui do stack eu estou modificando meu sistema de tooltip, ele esta quase pronto, porem estou tendo um problema.
Quando uso um texto muito grande na classe 'masterTooltip-left' o tooltip bug, ele não alinha direito e por isso não e exibido. alguém sabe como resolver isso?
$(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>
<div class='masterTooltip-right w100' 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>