function NaytechTooltipTitle(seletor,msg){
if(!msg){msg=$(seletor).attr('title');} //// pega a mensagem do atributo title ou recebe a mensagem enviada na chamada da função
$(seletor).attr('title','');/// depois de guardado acima o title, apaga a mensagem do mesmo somente na tag para não mostrar o tooltip padrão do html
$(seletor).each(function () {
if (msg) {
$('body').append("<style id='naytech-tooltip-css'>.naytech-tooltip{color: #fff;background:#1d1d1d;padding:10px;position:absolute;z-index:10000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;max-width: 50%;}</style>");
$('body').append("<div class='naytech-tooltip'>" + msg + "</div>");
}
// tip.show(); //Show tooltip
}).mouseout(function (e) {
$(".naytech-tooltip").remove();
$("style#naytech-tooltip-css").remove();
$(seletor).attr('title',msg);/// após tirar o mouse de cima da tag, põe-se a mensagem no title para não perder o mesmo
}).mousemove(function (e) {
tip = $(".naytech-tooltip");
coord = 20;
var mousex = e.pageX + coord; //Get X coodrinates
var mousey = e.pageY + coord; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if (tipVisX < coord) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - coord;
}
if (tipVisY < coord) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - coord;
}
tip.css({top: mousey, left: mousex});
});
}
No HTML:
<a onmouseover="NaytechTooltipTitle(this)" title="Mensagem que será exibida no tooltip">Passe o mouse em cima para exibir o tooltip com a mensagem que está no atributo title!</a>
0 comentários:
Postar um comentário