;(function ($, window, document, undefined) { 'use strict'; Foundation.libs.tooltip = { name : 'tooltip', version : '{{VERSION}}', settings : { additional_inheritable_classes : [], tooltip_class : '.tooltip', append_to : 'body', touch_close_text : 'Tap To Close', disable_for_touch : false, hover_delay : 200, fade_in_duration : 150, fade_out_duration : 150, show_on : 'all', tip_template : function (selector, content) { return '' + content + ''; } }, cache : {}, init : function (scope, method, options) { Foundation.inherit(this, 'random_str'); this.bindings(method, options); }, should_show : function (target, tip) { var settings = $.extend({}, this.settings, this.data_options(target)); if (settings.show_on === 'all') { return true; } else if (this.small() && settings.show_on === 'small') { return true; } else if (this.medium() && settings.show_on === 'medium') { return true; } else if (this.large() && settings.show_on === 'large') { return true; } return false; }, medium : function () { return matchMedia(Foundation.media_queries['medium']).matches; }, large : function () { return matchMedia(Foundation.media_queries['large']).matches; }, events : function (instance) { var self = this, S = self.S; self.create(this.S(instance)); function _startShow(elt, $this, immediate) { if (elt.timer) { return; } if (immediate) { elt.timer = null; self.showTip($this); } else { elt.timer = setTimeout(function () { elt.timer = null; self.showTip($this); }.bind(elt), self.settings.hover_delay); } } function _startHide(elt, $this) { if (elt.timer) { clearTimeout(elt.timer); elt.timer = null; } self.hide($this); } $(this.scope) .off('.tooltip') .on('mouseenter.fndtn.tooltip mouseleave.fndtn.tooltip touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip', '[' + this.attr_name() + ']', function (e) { var $this = S(this), settings = $.extend({}, self.settings, self.data_options($this)), is_touch = false; if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type) && S(e.target).is('a')) { return false; } if (/mouse/i.test(e.type) && self.ie_touch(e)) { return false; } if ($this.hasClass('open')) { if (Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type)) { e.preventDefault(); } self.hide($this); } else { if (settings.disable_for_touch && Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type)) { return; } else if (!settings.disable_for_touch && Modernizr.touch && /touchstart|MSPointerDown/i.test(e.type)) { e.preventDefault(); S(settings.tooltip_class + '.open').hide(); is_touch = true; // close other open tooltips on touch if ($('.open[' + self.attr_name() + ']').length > 0) { var prevOpen = S($('.open[' + self.attr_name() + ']')[0]); self.hide(prevOpen); } } if (/enter|over/i.test(e.type)) { _startShow(this, $this); } else if (e.type === 'mouseout' || e.type === 'mouseleave') { _startHide(this, $this); } else { _startShow(this, $this, true); } } }) .on('mouseleave.fndtn.tooltip touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip', '[' + this.attr_name() + '].open', function (e) { if (/mouse/i.test(e.type) && self.ie_touch(e)) { return false; } if ($(this).data('tooltip-open-event-type') == 'touch' && e.type == 'mouseleave') { return; } else if ($(this).data('tooltip-open-event-type') == 'mouse' && /MSPointerDown|touchstart/i.test(e.type)) { self.convert_to_touch($(this)); } else { _startHide(this, $(this)); } }) .on('DOMNodeRemoved DOMAttrModified', '[' + this.attr_name() + ']:not(a)', function (e) { _startHide(this, S(this)); }); }, ie_touch : function (e) { // How do I distinguish between IE11 and Windows Phone 8????? return false; }, showTip : function ($target) { var $tip = this.getTip($target); if (this.should_show($target, $tip)) { return this.show($target); } return; }, getTip : function ($target) { var selector = this.selector($target), settings = $.extend({}, this.settings, this.data_options($target)), tip = null; if (selector) { tip = this.S('span[data-selector="' + selector + '"]' + settings.tooltip_class); } return (typeof tip === 'object') ? tip : false; }, selector : function ($target) { var dataSelector = $target.attr(this.attr_name()) || $target.attr('data-selector'); if (typeof dataSelector != 'string') { dataSelector = this.random_str(6); $target .attr('data-selector', dataSelector) .attr('aria-describedby', dataSelector); } return dataSelector; }, create : function ($target) { 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)) { tip_template = window[settings.tip_template]; } var $tip = $(tip_template(this.selector($target), $('
').html($target.attr('title')).text())), classes = this.inheritable_classes($target); $tip.addClass(classes).appendTo(settings.append_to); if (Modernizr.touch) { $tip.append('' + settings.touch_close_text + ''); $tip.on('touchstart.fndtn.tooltip MSPointerDown.fndtn.tooltip', function (e) { self.hide($target); }); } $target.removeAttr('title').attr('title', ''); }, reposition : function (target, tip, classes) { var width, nub, nubHeight, nubWidth, objPos; tip.css('visibility', 'hidden').show(); width = target.data('width'); nub = tip.children('.nub'); nubHeight = nub.outerHeight(); nubWidth = nub.outerWidth(); 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', 'bottom' : (bottom) ? bottom : 'auto', 'left' : (left) ? left : 'auto', 'right' : (right) ? right : 'auto' }).end(); }; var o_top = target.offset().top; var o_left = target.offset().left; var outerHeight = target.outerHeight(); objPos(tip, (o_top + outerHeight + 10), 'auto', 'auto', o_left); if (this.small()) { objPos(tip, (o_top + outerHeight + 10), 'auto', 'auto', 12.5, $(this.scope).width()); tip.addClass('tip-override'); objPos(nub, -nubHeight, 'auto', 'auto', o_left); } else { if (Foundation.rtl) { nub.addClass('rtl'); o_left = o_left + target.outerWidth() - tip.outerWidth(); } objPos(tip, (o_top + outerHeight + 10), 'auto', 'auto', o_left); // reset nub from small styles, if they've been applied if (nub.attr('style')) { nub.removeAttr('style'); } tip.removeClass('tip-override'); var tip_outerHeight = tip.outerHeight(); if (classes && classes.indexOf('tip-top') > -1) { if (Foundation.rtl) { nub.addClass('rtl'); } objPos(tip, (o_top - tip_outerHeight), 'auto', 'auto', o_left) .removeClass('tip-override'); } else if (classes && classes.indexOf('tip-left') > -1) { objPos(tip, (o_top + (outerHeight / 2) - (tip_outerHeight / 2)), 'auto', 'auto', (o_left - tip.outerWidth() - nubHeight)) .removeClass('tip-override'); nub.removeClass('rtl'); } else if (classes && classes.indexOf('tip-right') > -1) { objPos(tip, (o_top + (outerHeight / 2) - (tip_outerHeight / 2)), 'auto', 'auto', (o_left + target.outerWidth() + nubHeight)) .removeClass('tip-override'); nub.removeClass('rtl'); } } tip.css('visibility', 'visible').hide(); }, small : function () { return matchMedia(Foundation.media_queries.small).matches && !matchMedia(Foundation.media_queries.medium).matches; }, inheritable_classes : function ($target) { var settings = $.extend({}, this.settings, this.data_options($target)), 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; } }).join(' ') : ''; return $.trim(filtered); }, 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('' + settings.touch_close_text + ''); $tip.on('click.fndtn.tooltip.tapclose touchstart.fndtn.tooltip.tapclose MSPointerDown.fndtn.tooltip.tapclose', function (e) { self.hide($target); }); } $target.data('tooltip-open-event-type', 'touch'); }, show : function ($target) { var $tip = this.getTip($target); if ($target.data('tooltip-open-event-type') == 'touch') { this.convert_to_touch($target); } this.reposition($target, $tip, $target.attr('class')); $target.addClass('open'); $tip.fadeIn(this.settings.fade_in_duration); }, hide : function ($target) { var $tip = this.getTip($target); $tip.fadeOut(this.settings.fade_out_duration, function () { $tip.find('.tap-to-close').remove(); $tip.off('click.fndtn.tooltip.tapclose MSPointerDown.fndtn.tapclose'); $target.removeClass('open'); }); }, off : function () { var self = this; this.S(this.scope).off('.fndtn.tooltip'); this.S(this.settings.tooltip_class).each(function (i) { $('[' + self.attr_name() + ']').eq(i).attr('title', $(this).text()); }).remove(); }, reflow : function () {} }; }(jQuery, window, window.document));