app/assets/javascripts/materialize/tooltip.js in materialize-sass-0.97.6 vs app/assets/javascripts/materialize/tooltip.js in materialize-sass-0.97.7
- old
+ new
@@ -1,85 +1,113 @@
(function ($) {
$.fn.tooltip = function (options) {
- var timeout = null,
- margin = 5;
+ var timeout = null,
+ margin = 5;
// Defaults
var defaults = {
- delay: 350
+ delay: 350,
+ tooltip: '',
+ position: 'bottom',
+ html: false
};
// Remove tooltip from the activator
if (options === "remove") {
- this.each(function(){
+ this.each(function() {
$('#' + $(this).attr('data-tooltip-id')).remove();
$(this).off('mouseenter.tooltip mouseleave.tooltip');
});
return false;
}
options = $.extend(defaults, options);
-
- return this.each(function(){
+ return this.each(function() {
var tooltipId = Materialize.guid();
var origin = $(this);
origin.attr('data-tooltip-id', tooltipId);
- // Create Text span
- var tooltip_text = $('<span></span>').text(origin.attr('data-tooltip'));
+ // Get attributes.
+ var allowHtml,
+ tooltipDelay,
+ tooltipPosition,
+ tooltipText,
+ tooltipEl,
+ backdrop;
+ var setAttributes = function() {
+ allowHtml = origin.attr('data-html') ? origin.attr('data-html') === 'true' : options.html;
+ tooltipDelay = origin.attr('data-delay');
+ tooltipDelay = (tooltipDelay === undefined || tooltipDelay === '') ?
+ options.delay : tooltipDelay;
+ tooltipPosition = origin.attr('data-position');
+ tooltipPosition = (tooltipPosition === undefined || tooltipPosition === '') ?
+ options.position : tooltipPosition;
+ tooltipText = origin.attr('data-tooltip');
+ tooltipText = (tooltipText === undefined || tooltipText === '') ?
+ options.tooltip : tooltipText;
+ };
+ setAttributes();
- // Create tooltip
- var newTooltip = $('<div></div>');
- newTooltip.addClass('material-tooltip').append(tooltip_text)
- .appendTo($('body'))
- .attr('id', tooltipId);
+ var renderTooltipEl = function() {
+ var tooltip = $('<div class="material-tooltip"></div>');
- var backdrop = $('<div></div>').addClass('backdrop');
- backdrop.appendTo(newTooltip);
- backdrop.css({ top: 0, left:0 });
+ // Create Text span
+ if (allowHtml) {
+ tooltipText = $('<span></span>').html(tooltipText);
+ } else{
+ tooltipText = $('<span></span>').text(tooltipText);
+ }
+ // Create tooltip
+ tooltip.append(tooltipText)
+ .appendTo($('body'))
+ .attr('id', tooltipId);
- //Destroy previously binded events
- origin.off('mouseenter.tooltip mouseleave.tooltip');
- // Mouse In
- var started = false, timeoutRef;
- origin.on({
- 'mouseenter.tooltip': function(e) {
- var tooltip_delay = origin.attr('data-delay');
- tooltip_delay = (tooltip_delay === undefined || tooltip_delay === '') ?
- options.delay : tooltip_delay;
- timeoutRef = setTimeout(function(){
+ // Create backdrop
+ backdrop = $('<div class="backdrop"></div>');
+ backdrop.appendTo(tooltip);
+ return tooltip;
+ };
+ tooltipEl = renderTooltipEl();
+
+ // Destroy previously binded events
+ origin.off('mouseenter.tooltip mouseleave.tooltip');
+ // Mouse In
+ var started = false, timeoutRef;
+ origin.on({'mouseenter.tooltip': function(e) {
+ var showTooltip = function() {
+ setAttributes();
started = true;
- newTooltip.velocity('stop');
+ tooltipEl.velocity('stop');
backdrop.velocity('stop');
- newTooltip.css({ display: 'block', left: '0px', top: '0px' });
+ tooltipEl.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 tooltipHeight = tooltipEl.outerHeight();
+ var tooltipWidth = tooltipEl.outerWidth();
var tooltipVerticalMovement = '0px';
var tooltipHorizontalMovement = '0px';
- var scale_factor = 8;
+ var scaleXFactor = 8;
+ var scaleYFactor = 8;
var targetTop, targetLeft, newCoordinates;
if (tooltipPosition === "top") {
// Top Position
targetTop = origin.offset().top - tooltipHeight - margin;
targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
tooltipVerticalMovement = '-10px';
backdrop.css({
+ bottom: 0,
+ left: 0,
borderRadius: '14px 14px 0 0',
- transformOrigin: '50% 90%',
+ transformOrigin: '50% 100%',
marginTop: tooltipHeight,
marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
});
}
// Left Position
@@ -88,10 +116,12 @@
targetLeft = origin.offset().left - tooltipWidth - margin;
newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
tooltipHorizontalMovement = '-10px';
backdrop.css({
+ top: '-7px',
+ right: 0,
width: '14px',
height: '14px',
borderRadius: '14px 0 0 14px',
transformOrigin: '95% 50%',
marginTop: tooltipHeight/2,
@@ -104,10 +134,12 @@
targetLeft = origin.offset().left + originWidth + margin;
newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
tooltipHorizontalMovement = '+10px';
backdrop.css({
+ top: '-7px',
+ left: 0,
width: '14px',
height: '14px',
borderRadius: '0 14px 14px 0',
transformOrigin: '5% 50%',
marginTop: tooltipHeight/2,
@@ -119,68 +151,63 @@
targetTop = origin.offset().top + origin.outerHeight() + margin;
targetLeft = origin.offset().left + originWidth/2 - tooltipWidth/2;
newCoordinates = repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
tooltipVerticalMovement = '+10px';
backdrop.css({
+ top: 0,
+ left: 0,
marginLeft: (tooltipWidth/2) - (backdrop.width()/2)
});
}
// Set tooptip css placement
- newTooltip.css({
+ tooltipEl.css({
top: newCoordinates.y,
left: newCoordinates.x
});
// 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;
- }
+ scaleXFactor = Math.SQRT2 * tooltipWidth / parseInt(backdrop.css('width'));
+ scaleYFactor = Math.SQRT2 * tooltipHeight / parseInt(backdrop.css('height'));
- newTooltip.velocity({ marginTop: tooltipVerticalMovement, marginLeft: tooltipHorizontalMovement}, { duration: 350, queue: false })
+ tooltipEl.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'});
+ .velocity({scaleX: scaleXFactor, scaleY: scaleYFactor}, {duration: 300, delay: 0, queue: false, easing: 'easeInOutQuad'});
+ };
+ timeoutRef = setTimeout(showTooltip, tooltipDelay); // End Interval
- }, tooltip_delay); // End Interval
-
// Mouse Out
},
'mouseleave.tooltip': function(){
// Reset State
started = false;
clearTimeout(timeoutRef);
// Animate back
setTimeout(function() {
- if (started != true) {
- newTooltip.velocity({
+ if (started !== true) {
+ tooltipEl.velocity({
opacity: 0, marginTop: 0, marginLeft: 0}, { duration: 225, queue: false});
- backdrop.velocity({opacity: 0, scale: 1}, {
+ backdrop.velocity({opacity: 0, scaleX: 1, scaleY: 1}, {
duration:225,
queue: false,
complete: function(){
backdrop.css('display', 'none');
- newTooltip.css('display', 'none');
+ tooltipEl.css('display', 'none');
started = false;}
});
}
},225);
}
});
});
};
var repositionWithinScreen = function(x, y, width, height) {
- var newX = x
+ var newX = x;
var newY = y;
if (newX < 0) {
newX = 4;
} else if (newX + width > window.innerWidth) {