1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| function svgTip(opts) {
opts = opts || {};
opts.fontsize = opts.fontsize || "14px";
opts.padding = opts.padding || "12px";
// opts.bgcolor = opts.bgcolor || "#FFD700"; //"#FFD700"
opts.color = opts.color || "#000000"; //"#000000";
opts.opacity = opts.opacity || 2.6;
$.each( $('[title]', 'svg'), function(id, obj) {
var tt = $(this).attr("title"),
that = $("<div class='svgtip'>" + tt + "</div>");
that.css({'position': "absolute",
'top': 0,
'left': 0,
'display': "none",
'backtipground-color': opts.bgcolor,
'color': opts.color,
'padding': opts.padding,
'font-size': opts.fontsize,
'opacity': opts.opacity,
'pointer-events' : 'none'
});
$(this).hover(function(event) {
that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop()});
that.addClass("active");
that.slideDown(100);
}, function() {
that.slideUp(100);
that.removeClass("active");
});
$(this).on("mousemove", function(event) {
if (that.hasClass("active")) {
that.css({'left': event.clientX, 'top': event.clientY + $(window).scrollTop() - that.height()});
}
});
$('body').append(that);
});
}
//new svgTip({fontsize: "20px", padding:"30px"});
new svgTip({fontsize: "20px", padding:"50px"});
function lll (msg) { $('#debug').append(msg + "<br/>");} |
Partager