Bike!Bike! Website!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

203 lines
6.7 KiB

;(function ($, window, document, undefined) {
'use strict';
Foundation.libs.tooltip = {
name : 'tooltip',
version : '5.0.3',
settings : {
additional_inheritable_classes : [],
tooltip_class : '.tooltip',
append_to: 'body',
touch_close_text: 'Tap To Close',
disable_for_touch: false,
tip_template : function (selector, content) {
return '<span data-selector="' + selector + '" class="'
+ Foundation.libs.tooltip.settings.tooltip_class.substring(1)
+ '">' + content + '<span class="nub"></span></span>';
}
},
cache : {},
init : function (scope, method, options) {
this.bindings(method, options);
},
events : function () {
var self = this;
if (Modernizr.touch) {
$(this.scope)
.off('.tooltip')
.on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
'[data-tooltip]', function (e) {
var settings = $.extend({}, self.settings, self.data_options($(this)));
if (!settings.disable_for_touch) {
e.preventDefault();
$(settings.tooltip_class).hide();
self.showOrCreateTip($(this));
}
})
.on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
this.settings.tooltip_class, function (e) {
e.preventDefault();
$(this).fadeOut(150);
});
} else {
$(this.scope)
.off('.tooltip')
.on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip',
'[data-tooltip]', function (e) {
var $this = $(this);
if (/enter|over/i.test(e.type)) {
self.showOrCreateTip($this);
} else if (e.type === 'mouseout' || e.type === 'mouseleave') {
self.hide($this);
}
});
}
},
showOrCreateTip : function ($target) {
var $tip = this.getTip($target);
if ($tip && $tip.length > 0) {
return this.show($target);
}
return this.create($target);
},
getTip : function ($target) {
var selector = this.selector($target),
tip = null;
if (selector) {
tip = $('span[data-selector="' + selector + '"]' + this.settings.tooltip_class);
}
return (typeof tip === 'object') ? tip : false;
},
selector : function ($target) {
var id = $target.attr('id'),
dataSelector = $target.attr('data-tooltip') || $target.attr('data-selector');
if ((id && id.length < 1 || !id) && typeof dataSelector != 'string') {
dataSelector = 'tooltip' + Math.random().toString(36).substring(7);
$target.attr('data-selector', dataSelector);
}
return (id && id.length > 0) ? id : dataSelector;
},
create : function ($target) {
var $tip = $(this.settings.tip_template(this.selector($target), $('<div></div>').html($target.attr('title')).html())),
classes = this.inheritable_classes($target);
$tip.addClass(classes).appendTo(this.settings.append_to);
if (Modernizr.touch) {
$tip.append('<span class="tap-to-close">'+this.settings.touch_close_text+'</span>');
}
$target.removeAttr('title').attr('title','');
this.show($target);
},
reposition : function (target, tip, classes) {
var width, nub, nubHeight, nubWidth, column, objPos;
tip.css('visibility', 'hidden').show();
width = target.data('width');
nub = tip.children('.nub');
nubHeight = nub.outerHeight();
nubWidth = nub.outerHeight();
tip.css({'width' : (width) ? width : 'auto'});
objPos = function (obj, top, right, bottom, left, width) {
return obj.css({
'top' : (top) ? top : 'auto',
'bottom' : (bottom) ? bottom : 'auto',
'left' : (left) ? left : 'auto',
'right' : (right) ? right : 'auto'
}).end();
};
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left);
if (this.small()) {
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', 12.5, $(this.scope).width());
tip.addClass('tip-override');
objPos(nub, -nubHeight, 'auto', 'auto', target.offset().left);
} else {
var left = target.offset().left;
if (Foundation.rtl) {
left = target.offset().left + target.offset().width - tip.outerWidth();
}
objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', left);
tip.removeClass('tip-override');
if (classes && classes.indexOf('tip-top') > -1) {
objPos(tip, (target.offset().top - tip.outerHeight() - 10), 'auto', 'auto', left)
.removeClass('tip-override');
} else if (classes && classes.indexOf('tip-left') > -1) {
objPos(tip, (target.offset().top + (target.outerHeight() / 2) - (tip.outerHeight() / 2)), 'auto', 'auto', (target.offset().left - tip.outerWidth() - nubHeight))
.removeClass('tip-override');
} else if (classes && classes.indexOf('tip-right') > -1) {
objPos(tip, (target.offset().top + (target.outerHeight() / 2) - (tip.outerHeight() / 2)), 'auto', 'auto', (target.offset().left + target.outerWidth() + nubHeight))
.removeClass('tip-override');
}
}
tip.css('visibility', 'visible').hide();
},
small : function () {
return matchMedia(Foundation.media_queries.small).matches;
},
inheritable_classes : function (target) {
var inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'noradius'].concat(this.settings.additional_inheritable_classes),
classes = target.attr('class'),
filtered = classes ? $.map(classes.split(' '), function (el, i) {
if ($.inArray(el, inheritables) !== -1) {
return el;
}
}).join(' ') : '';
return $.trim(filtered);
},
show : function ($target) {
var $tip = this.getTip($target);
this.reposition($target, $tip, $target.attr('class'));
$tip.fadeIn(150);
},
hide : function ($target) {
var $tip = this.getTip($target);
$tip.fadeOut(150);
},
// deprecate reload
reload : function () {
var $self = $(this);
return ($self.data('fndtn-tooltips')) ? $self.foundationTooltips('destroy').foundationTooltips('init') : $self.foundationTooltips('init');
},
off : function () {
$(this.scope).off('.fndtn.tooltip');
$(this.settings.tooltip_class).each(function (i) {
$('[data-tooltip]').get(i).attr('title', $(this).text());
}).remove();
},
reflow : function () {}
};
}(jQuery, this, this.document));