123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202 |
- ;(function ($, window, document, undefined) {
- 'use strict';
- Foundation.libs.tooltip = {
- name : 'tooltip',
- version : '5.0.0',
- 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();
- 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',
- 'width' : (width) ? width : 'auto'
- }).end();
- };
- objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left, width);
- 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, width);
- tip.removeClass('tip-override');
- if (classes && classes.indexOf('tip-top') > -1) {
- objPos(tip, (target.offset().top - tip.outerHeight()), 'auto', 'auto', left, width)
- .removeClass('tip-override');
- } else if (classes && classes.indexOf('tip-left') > -1) {
- objPos(tip, (target.offset().top + (target.outerHeight() / 2) - nubHeight*2.5), 'auto', 'auto', (target.offset().left - tip.outerWidth() - nubHeight), width)
- .removeClass('tip-override');
- } else if (classes && classes.indexOf('tip-right') > -1) {
- objPos(tip, (target.offset().top + (target.outerHeight() / 2) - nubHeight*2.5), 'auto', 'auto', (target.offset().left + target.outerWidth() + nubHeight), width)
- .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));
|