Foundation.libs.tooltip = {
name : 'tooltip',
- version : '5.1.1',
- version : '5.0.0',
++ version : '5.2.0',
settings : {
additional_inheritable_classes : [],
},
events : function () {
- var self = this;
+ var self = this,
+ S = self.S;
-
- if (Modernizr.touch) {
- S(document)
- .off('.tooltip')
- .on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
- '[' + this.attr_name() + ']:not(a)', function (e) {
- var settings = $.extend({}, self.settings, self.data_options(S(this)));
- if (!settings.disable_for_touch) {
+
+ $(this.scope)
+ .off('.tooltip')
- .on('mouseenter.fndtn.tooltip touchstart.fndtn.tooltip',
- '[data-tooltip]:not(".open")', function (e) {
- var $this = $(this),
++ .on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip touchstart.fndtn.tooltip',
++ '[' + this.attr_name() + ']:not(a)', function (e) {
++ var $this = S(this),
+ settings = $.extend({}, self.settings, self.data_options($this)),
- is_touch = /touchstart/i.test(e.type);
-
- if(settings.disable_for_touch && is_touch) {
++ is_touch = false;
++
++ if ($this.hasClass('open')) {
++ if (Modernizr.touch && /touchstart/i.test(e.type)) e.preventDefault();
++ self.hide($this);
++ } else {
++ if (settings.disable_for_touch && Modernizr.touch && /touchstart/i.test(e.type)) {
+ return;
- }
- else if(!settings.disable_for_touch && self.is_touch) {
++ } else if(!settings.disable_for_touch && Modernizr.touch && /touchstart/i.test(e.type)) {
e.preventDefault();
- S(settings.tooltip_class).hide();
- self.showOrCreateTip(S(this));
++ S(settings.tooltip_class + '.open').hide();
++ is_touch = true;
}
- })
- .on('DOMNodeRemoved DOMAttrModified', '[' + this.attr_name() + ']:not(a)', function (e) {
- self.hide(S(this));
- })
- .on('click.fndtn.tooltip touchstart.fndtn.tooltip touchend.fndtn.tooltip',
- this.settings.tooltip_class, function (e) {
- e.preventDefault();
- S(this).fadeOut(150);
- });
- } else {
- S(document)
- .off('.tooltip')
- .on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip',
- '[' + this.attr_name() + ']', function (e) {
- var $this = S(this);
-
- // Close all tooltips so they don't overlap
- $('.open[data-tooltip]').each(function() {
- self.hide($(this));
- });
-
- if(is_touch) {
- $this.data('tooltip-open-event-type', 'touch');
+
+ if (/enter|over/i.test(e.type)) {
+ this.timer = setTimeout(function () {
+ var tip = self.showOrCreateTip($this);
+ }.bind(this), self.settings.hover_delay);
+ } else if (e.type === 'mouseout' || e.type === 'mouseleave') {
+ clearTimeout(this.timer);
+ self.hide($this);
+ } else {
- $this.data('tooltip-open-event-type', 'mouse');
++ self.showOrCreateTip($this);
}
- })
- .on('DOMNodeRemoved DOMAttrModified', '[' + this.attr_name() + ']:not(a)', function (e) {
- self.hide(S(this));
- });
- }
-
- self.showOrCreateTip($this);
++ }
+ })
- .on('mouseleave.fndtn.tooltip touchstart.fndtn.tooltip', '.open[data-tooltip]', function (e) {
++ .on('mouseleave.fndtn.tooltip touchstart.fndtn.tooltip', '.open[' + this.attr_name() + ']', function (e) {
+ if($(this).data('tooltip-open-event-type') == 'touch' && e.type == 'mouseleave') {
+ return;
+ }
+ else if($(this).data('tooltip-open-event-type') == 'mouse' && e.type == 'touchstart') {
+ self.convert_to_touch($(this));
+ } else {
+ self.hide($(this));
+ }
++ })
++ .on('DOMNodeRemoved DOMAttrModified', '[' + this.attr_name() + ']:not(a)', function (e) {
++ self.hide(S(this));
+ });
},
-- showOrCreateTip : function ($target) {
++ showOrCreateTip : function ($target, is_touch) {
var $tip = this.getTip($target);
-
+
if ($tip && $tip.length > 0) {
return this.show($target);
}
-- return this.create($target);
++ return this.create($target, is_touch);
},
getTip : function ($target) {
tip = null;
if (selector) {
- tip = this.S('span[data-selector="' + selector + '"]' + this.settings.tooltip_class);
- tip = $('[data-selector="' + selector + '"]' + settings.tooltip_class);
++ tip = this.S('span[data-selector="' + selector + '"]' + 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');
+ dataSelector = $target.attr(this.attr_name()) || $target.attr('data-selector');
if ((id && id.length < 1 || !id) && typeof dataSelector != 'string') {
- dataSelector = 'tooltip' + this.random_str(6);
- dataSelector = 'tooltip' + Math.random().toString(36).substring(7);
-- $target.attr('data-selector', dataSelector);
++ dataSelector = this.random_str(6);
++ $target.attr('data-selector', this.random_str(6));
}
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())),
- var settings = $.extend({}, this.settings, this.data_options($target)),
++ create : function ($target, is_touch) {
++ var self = this,
++ settings = $.extend({}, this.settings, this.data_options($target)),
+ tip_template = this.settings.tip_template;
+
- if(typeof settings.tip_template === 'string' && window.hasOwnProperty(settings.tip_template))
- {
++ if (typeof settings.tip_template === 'string' && window.hasOwnProperty(settings.tip_template)) {
+ tip_template = window[settings.tip_template];
+ }
+
+ var $tip = $(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>');
+ $tip.addClass(classes).appendTo(settings.append_to);
++
++ if (is_touch) {
++ $tip.append('<span class="tap-to-close">'+settings.touch_close_text+'</span>');
++ $tip.on('touchstart.fndtn.tooltip', function(e) {
++ self.hide($target);
++ });
+ }
++
$target.removeAttr('title').attr('title','');
this.show($target);
},
nub = tip.children('.nub');
nubHeight = nub.outerHeight();
nubWidth = nub.outerHeight();
-
- if(this.small()) {
+
- tip.css({'width' : (width) ? width : 'auto'});
++ if (this.small()) {
+ tip.css({'width' : '100%' });
+ } else {
+ tip.css({'width' : (width) ? width : 'auto'});
+ }
-
+
objPos = function (obj, top, right, bottom, left, width) {
return obj.css({
'top' : (top) ? top : 'auto',
return matchMedia(Foundation.media_queries.small).matches;
},
- inheritable_classes : function (target) {
- var inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'radius', 'round'].concat(this.settings.additional_inheritable_classes),
- classes = target.attr('class'),
+ inheritable_classes : function ($target) {
+ var settings = $.extend({}, this.settings, this.data_options($target)),
- inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'noradius'].concat(settings.additional_inheritable_classes),
++ inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'radius', 'round'].concat(settings.additional_inheritable_classes),
+ classes = $target.attr('class'),
filtered = classes ? $.map(classes.split(' '), function (el, i) {
if ($.inArray(el, inheritables) !== -1) {
return el;
return $.trim(filtered);
},
- if($tip.find('.tap-to-close').length === 0) {
+ convert_to_touch : function($target) {
+ var self = this,
+ $tip = self.getTip($target),
+ settings = $.extend({}, self.settings, self.data_options($target));
+
++ if ($tip.find('.tap-to-close').length === 0) {
+ $tip.append('<span class="tap-to-close">'+settings.touch_close_text+'</span>');
+ $tip.on('click.fndtn.tooltip.tapclose touchstart.fndtn.tooltip.tapclose', function(e) {
+ self.hide($target);
+ });
+ }
+
+ $target.data('tooltip-open-event-type', 'touch');
+ },
+
show : function ($target) {
var $tip = this.getTip($target);
hide : function ($target) {
var $tip = this.getTip($target);
-
- return $tip.fadeOut(150);
- },
-
- // deprecate reload
- reload : function () {
- var $self = $(this);
-
- return ($self.data('fndtn-tooltips')) ? $self.foundationTooltips('destroy').foundationTooltips('init') : $self.foundationTooltips('init');
+
+ $tip.fadeOut(150, function() {
+ $tip.find('.tap-to-close').remove();
+ $tip.off('click.fndtn.tooltip.tapclose touchstart.fndtn.tooltip.tapclose');
+ $target.removeClass('open');
+ });
},
- // 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');
- $('[data-tooltip]').each(function (i) {
- $(this).attr('title', $(this).text());
- self.getTip($(this)).remove();
- });
+ var self = this;
- $('[' + this.attr_name() + ']').get(i).attr('title', $(this).text());
+ this.S(this.scope).off('.fndtn.tooltip');
+ this.S(this.settings.tooltip_class).each(function (i) {
++ $('[' + self.attr_name() + ']').get(i).attr('title', $(this).text());
+ }).remove();
},
reflow : function () {}
};
--}(jQuery, this, this.document));
++}(jQuery, this, this.document));