https://www.ancomunn.co.uk/_js/foundation/jquery.foundation.tooltips.js

1/*
2 * jQuery Foundation Tooltips 2.0.2
3 * http://foundation.zurb.com
4 * Copyright 2012, ZURB
5 * Free to use under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7*/
8
9/*jslint unparam: true, browser: true, indent: 2 */
10
11;(function ($, window, undefined) {
12  'use strict';
13  
14  var settings = {
15      bodyHeight : 0,
16      selector : '.has-tip',
17      additionalInheritableClasses : [],
18      tooltipClass : '.tooltip',
19      tipTemplate : function (selector, content) {
20        return '<span data-selector="' + selector + '" class="' + settings.tooltipClass.substring(1) + '">' + content + '<span class="nub"></span></span>';
21      }
22    },
23    methods = {
24      init : function (options) {
25        settings = $.extend(settings, options);
26
27        // alias the old targetClass option
28        settings.selector = settings.targetClass ? settings.targetClass : settings.selector;
29
30        return this.each(function () {
31          var $body = $('body');
32
33          if (Modernizr.touch) {
34            $body.on('click.tooltip touchstart.tooltip touchend.tooltip', settings.selector, function (e) {
35              e.preventDefault();
36              $(settings.tooltipClass).hide();
37              methods.showOrCreateTip($(this));
38            });
39            $body.on('click.tooltip touchstart.tooltip touchend.tooltip', settings.tooltipClass, function (e) {
40              e.preventDefault();
41              $(this).fadeOut(150);
42            });
43          } else {
44            $body.on('mouseenter.tooltip mouseleave.tooltip', settings.selector, function (e) {
45              var $this = $(this);
46
47              if (e.type === 'mouseenter') {
48                methods.showOrCreateTip($this);
49              } else if (e.type === 'mouseleave') {
50                methods.hide($this);
51              }
52            });
53          }
54
55          $(this).data('tooltips', true);
56
57        });
58      },
59      showOrCreateTip : function ($target, content) {
60        var $tip = methods.getTip($target);
61
62        if ($tip && $tip.length > 0) {
63          methods.show($target);
64        } else {
65          methods.create($target, content);
66        }
67      },
68      getTip : function ($target) {
69        var selector = methods.selector($target),
70          tip = null;
71
72        if (selector) {
73          tip = $('span[data-selector=' + selector + ']' + settings.tooltipClass);
74        }
75        return (tip.length > 0) ? tip : false;
76      },
77      selector : function ($target) {
78        var id = $target.attr('id'),
79          dataSelector = $target.data('selector');
80
81        if (id === undefined && dataSelector === undefined) {
82          dataSelector = 'tooltip' + Math.random().toString(36).substring(7);
83          $target.attr('data-selector', dataSelector);
84        }
85        return (id) ? id : dataSelector;
86      },
87      create : function ($target, content) {
88        var $tip = $(settings.tipTemplate(methods.selector($target),
89          $('<div>').html(content ? content : $target.attr('title')).html())),
90          classes = methods.inheritable_classes($target);
91

92        $tip.addClass(classes).appendTo('body');
93        if (Modernizr.touch) {
94          $tip.append('<span class="tap-to-close">tap to close </span>');
95        }
96        $target.removeAttr('title');
97        methods.show($target);
98      },
99      reposition : function (target, tip, classes) {
100        var width, nub, nubHeight, nubWidth, column, objPos;
101
102        tip.css('visibility', 'hidden').show();
103
104        width = target.data('width');
105        nub = tip.children('.nub');
106        nubHeight = nub.outerHeight();
107        nubWidth = nub.outerWidth();
108
109        objPos = function (obj, top, right, bottom, left, width) {
110          return obj.css({
111            'top' : top,
112            'bottom' : bottom,
113            'left' : left,
114            'right' : right,
115            'max-width' : (width) ? width : 'auto'
116          }).end();
117        };
118
119        objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', target.offset().left, width);
120        objPos(nub, -nubHeight, 'auto', 'auto', 10);
121
122        if ($(window).width() < 767) {
123          if (target.data('mobile-width')) {
124            tip.width(target.data('mobile-width')).css('left', 15).addClass('tip-override');
125          } else {
126            column = target.closest('.columns');
127            if (column.length < 0) {
128              // if not using Foundation
129              column = $('body');
130            }
131            if (column.outerWidth()) {
132              tip.width(column.outerWidth() - 25).css('left', 15).addClass('tip-override');
133            } else {
134              var tmp_width = Math.ceil($(window).width() * 0.9);
135              tip.width(tmp_width).css('left', 15).addClass('tip-override');
136            }
137          }
138          objPos(nub, -nubHeight, 'auto', 'auto', target.offset().left);
139        } else {
140          if (classes && classes.indexOf('tip-top') > -1) {
141            objPos(tip, (target.offset().top - tip.outerHeight() - nubHeight), 'auto', 'auto', target.offset().left, width)
142              .removeClass('tip-override');
143            objPos(nub, 'auto', 'auto', -nubHeight, 'auto');
144          } else if (classes && classes.indexOf('tip-left') > -1) {
145            objPos(tip, (target.offset().top + (target.outerHeight() / 2) - nubHeight), 'auto', 'auto', (target.offset().left - tip.outerWidth() - 10), width)
146              .removeClass('tip-override');
147            objPos(nub, (tip.outerHeight() / 2) - (nubHeight / 2), -nubHeight, 'auto', 'auto');
148          } else if (classes && classes.indexOf('tip-right') > -1) {
149            objPos(tip, (target.offset().top + (target.outerHeight() / 2) - nubHeight), 'auto', 'auto', (target.offset().left + target.outerWidth() + 10), width)
150              .removeClass('tip-override');
151            objPos(nub, (tip.outerHeight() / 2) - (nubHeight / 2), 'auto', 'auto', -nubHeight);
152          } else if (classes && classes.indexOf('tip-centered-top') > -1) {
153            objPos(tip, (target.offset().top - tip.outerHeight() - nubHeight), 'auto', 'auto', (target.offset().left + ((target.outerWidth() - tip.outerWidth()) / 2) ), width)
154              .removeClass('tip-override');
155            objPos(nub, 'auto', ((tip.outerWidth() / 2) -(nubHeight / 2)), -nubHeight, 'auto');
156          } else if (classes && classes.indexOf('tip-centered-bottom') > -1) {
157            objPos(tip, (target.offset().top + target.outerHeight() + 10), 'auto', 'auto', (target.offset().left + ((target.outerWidth() - tip.outerWidth()) / 2) ), width)
158              .removeClass('tip-override');
159            objPos(nub, -nubHeight, ((tip.outerWidth() / 2) -(nubHeight / 2)), 'auto', 'auto');
160          }
161        }
162        tip.css('visibility', 'visible').hide();
163      },
164      inheritable_classes : function (target) {
165        var inheritables = ['tip-top', 'tip-left', 'tip-bottom', 'tip-right', 'tip-centered-top', 'tip-centered-bottom', 'noradius'].concat(settings.additionalInheritableClasses),
166          classes = target.attr('class'),
167          filtered = classes ? $.map(classes.split(' '), function (el, i) {
168              if ($.inArray(el, inheritables) !== -1) {
169                return el;
170              }
171          }).join(' ') : '';
172          
173        return $.trim(filtered);
174      },
175      show : function ($target) {
176        var $tip = methods.getTip($target);
177
178        methods.reposition($target, $tip, $target.attr('class'));
179        $tip.fadeIn(150);
180      },
181      hide : function ($target) {
182        var $tip = methods.getTip($target);
183
184        $tip.fadeOut(150);
185      },
186      reload : function () {
187        var $self = $(this);
188
189        return ($self.data('tooltips')) ? $self.foundationTooltips('destroy').foundationTooltips('init') : $self.foundationTooltips('init');
190      },
191      destroy : function () {
192        return this.each(function () {
193          $(window).off('.tooltip');
194          $(settings.selector).off('.tooltip');
195          $(settings.tooltipClass).each(function (i) {
196            $($(settings.selector).get(i)).attr('title', $(this).text());
197          }).remove();
198        });
199      }
200    };
201
202  $.fn.foundationTooltips = function (method) {
203    if (methods[method]) {
204      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
205    } else if (typeof method === 'object' || !method) {
206      return methods.init.apply(this, arguments);
207    } else {
208      $.error('Method ' +  method + ' does not exist on jQuery.foundationTooltips');
209    }
210  };
211}(jQuery, this));