(function ($) { $.fn.tooltip = function (options) { var timeout = null, counter = null, started = false, counterInterval = null, margin = 5; // Defaults var defaults = { delay: 350 }; // Remove tooltip from the activator if (options === "remove") { this.each(function(){ $('#' + $(this).attr('data-tooltip-id')).remove(); }); return false; } options = $.extend(defaults, options); return this.each(function(){ var tooltipId = Materialize.guid(); var origin = $(this); origin.attr('data-tooltip-id', tooltipId); // Create Text span var tooltip_text = $('').text(origin.attr('data-tooltip')); // Create tooltip var newTooltip = $('
'); newTooltip.addClass('material-tooltip').append(tooltip_text) .appendTo($('body')) .attr('id', tooltipId); var backdrop = $('').addClass('backdrop'); backdrop.appendTo(newTooltip); backdrop.css({ top: 0, left:0 }); //Destroy previously binded events origin.off('mouseenter.tooltip mouseleave.tooltip'); // Mouse In origin.on({ 'mouseenter.tooltip': function(e) { var tooltip_delay = origin.data("delay"); tooltip_delay = (tooltip_delay === undefined || tooltip_delay === '') ? options.delay : tooltip_delay; counter = 0; counterInterval = setInterval(function(){ counter += 10; if (counter >= tooltip_delay && started === false) { started = true; newTooltip.css({ display: 'block', left: '0px', top: '0px' }); // Set Tooltip text newTooltip.children('span').text(origin.attr('data-tooltip')); // Tooltip positioning var originWidth = origin.outerWidth(); var originHeight = origin.outerHeight(); var tooltipPosition = origin.attr('data-position'); var tooltipHeight = newTooltip.outerHeight(); var tooltipWidth = newTooltip.outerWidth(); var tooltipVerticalMovement = '0px'; var tooltipHorizontalMovement = '0px'; var scale_factor = 8; if (tooltipPosition === "top") { // Top Position newTooltip.css({ top: origin.offset().top - tooltipHeight - margin, left: origin.offset().left + originWidth/2 - tooltipWidth/2 }); tooltipVerticalMovement = '-10px'; backdrop.css({ borderRadius: '14px 14px 0 0', transformOrigin: '50% 90%', marginTop: tooltipHeight, marginLeft: (tooltipWidth/2) - (backdrop.width()/2) }); } // Left Position else if (tooltipPosition === "left") { newTooltip.css({ top: origin.offset().top + originHeight/2 - tooltipHeight/2, left: origin.offset().left - tooltipWidth - margin }); tooltipHorizontalMovement = '-10px'; backdrop.css({ width: '14px', height: '14px', borderRadius: '14px 0 0 14px', transformOrigin: '95% 50%', marginTop: tooltipHeight/2, marginLeft: tooltipWidth }); } // Right Position else if (tooltipPosition === "right") { newTooltip.css({ top: origin.offset().top + originHeight/2 - tooltipHeight/2, left: origin.offset().left + originWidth + margin }); tooltipHorizontalMovement = '+10px'; backdrop.css({ width: '14px', height: '14px', borderRadius: '0 14px 14px 0', transformOrigin: '5% 50%', marginTop: tooltipHeight/2, marginLeft: '0px' }); } else { // Bottom Position newTooltip.css({ top: origin.offset().top + origin.outerHeight() + margin, left: origin.offset().left + originWidth/2 - tooltipWidth/2 }); tooltipVerticalMovement = '+10px'; backdrop.css({ marginLeft: (tooltipWidth/2) - (backdrop.width()/2) }); } // Calculate Scale to fill scale_factor = tooltipWidth / 8; if (scale_factor < 8) { scale_factor = 8; } if (tooltipPosition === "right" || tooltipPosition === "left") { scale_factor = tooltipWidth / 10; if (scale_factor < 6) scale_factor = 6; } newTooltip.velocity({ marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 350, queue: false }) .velocity({opacity: 1}, {duration: 300, delay: 50, queue: false}); backdrop.css({ display: 'block' }) .velocity({opacity:1},{duration: 55, delay: 0, queue: false}) .velocity({scale: scale_factor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'}); } }, 10); // End Interval // Mouse Out }, 'mouseleave.tooltip': function(){ // Reset State clearInterval(counterInterval); counter = 0; // Animate back newTooltip.velocity({ opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false, delay: 225 } ); backdrop.velocity({opacity: 0, scale: 1}, { duration:225, delay: 275, queue: false, complete: function(){ backdrop.css('display', 'none'); newTooltip.css('display', 'none'); started = false;} }); } }); }); }; $(document).ready(function(){ $('.tooltipped').tooltip(); }); }( jQuery ));