https://morgantownpd.com/Assets/Scripts/Tooltip.js

1jQuery.showTooltip = function (opt) {
2    //Nullity/Empty checks
3    if (opt == null)
4        return;
5    if (opt.Id == null || opt.Id == '')
6        return;
7
8    if (!window.TooltipClassInstance)
9        window.TooltipClassInstance = new TooltipClass();
10
11    if (opt.alwaysShow || $.cookie('tooltips') == null || window.TooltipClassInstance.tooltipEligible(opt) || parseInt($.cookie('daysSinceLastLogin'), 10) > 30) {
12
13        var defaults = {
14            Id: '',//Id of the tooltip to be formed
15            tooltipContent: '',//Content that needs to be displayed in the tooltip
16            className: '',//Classes for tooltip element
17            $target: null,//target element for which tooltip is suppose to show.
18            $referenceElements: null,//An element or a set of elements, clicking which, the tooltip should disappear, as if we clicked the "thanks" button on the tooltip. If the reference element is same as target element, pass this as null.        
19            slideOrientation: 'down',
20            alwaysShow: false // If true ignores cookie and shows tooltip no matter what.
21        };
22
23        var self = window.TooltipClassInstance;
24
25        var options = $.extend(defaults, opt);
26
27        return TooltipClass.prototype.HelpToolTips.$isTooltipDismissed(options.Id).done(function (isPermanentlyDismissed) {
28            if (!isPermanentlyDismissed) {
29                //Check if element already exists on the page
30                var $tooltip = $('#' + options.Id);
31                if ($tooltip.length > 0) {
32                    //Reset the class on the tooltip(classes might change based on orientation, for ex , Live edit tabs.)
33                    $tooltip.removeAttr('class').addClass(options.className);
34
35                    //Adjust position in the DOM
36                    adjustFlyoutPosition(options.$target, $tooltip);
37
38                    //Slide tooltip if not already on the page.
39                    if ($tooltip.is(':hidden') && $tooltip.data('dismiss') == 'false') {
40                        $tooltip.show('slide', { direction: options.slideOrientation }, 1000).show();
41                    }
42                }
43                else {
44                    //Create a tooltip markup on fly
45                    $tooltip = self.getTooltip(options);
46
47                    //Adjust position in DOM
48                    adjustFlyoutPosition(options.$target, $tooltip);
49
50                    //Slide tooltip to show.
51                    $tooltip.show('slide', { direction: options.slideOrientation }, 1000);
52                }
53                //Bind close event(s).
54                self.bindClose($tooltip, options);
55            }
56        });
57    }
58};
59
60//Class for tooltip framework
61function TooltipClass()
62{
63
64}
65
66TooltipClass.prototype.tooltipEligible = function (opt) {
67    var id = opt.Id;
68    if (id == null || id == '')
69        return true;
70
71    var $cookieArr = $.cookie('tooltips').split('&');
72    for (var i = 0; i < $cookieArr.length; i++) {
73        var $subSplit = $cookieArr[i].split('=');
74        if ($subSplit[0] == id) {
75            return ($subSplit[1] == '0' ? false : true);
76        }
77    };
78
79    return true;
80};
81
82TooltipClass.prototype.getTooltip = function (options) {
83    //Create on the fly markup for tooltip.
84    var tooltip = '<div id="' + options.Id + '" class="' + options.className + '" style="display: none;">';
85    tooltip += '<div class="cpPopOverBody">';
86    tooltip += '<div class="cpTabPanel showing" style="display: block;">' + options.tooltipContent + '</div>';
87    tooltip += '</div></div>';
88    var $tooltip = $(tooltip);
89    $tooltip.data('dismiss', 'false');
90    $tooltip.appendTo('body');
91
92    return $tooltip;
93};
94
95//Bind close events to the tooltip element button(thanks button) and the reference elements.
96TooltipClass.prototype.bindClose = function ($tooltip, options) {
97    //If no reference elements are specified, takes the target as the only reference element.
98    if (options.$referenceElements == null)
99        options.$referenceElements = options.$target;
100
101    var self = window.TooltipClassInstance;
102
103    //Bind click event to tooltip's thanks button.
104    $tooltip.find('.closeTooltip').unbind('click').click(function (e) {
105		e.preventDefault();
106        self.closeTooltip(options);
107    });

108
109    //Bind click even to any reference element(s) that are also suppose to close the tooltip. Use namespace to prevent unbinding their own click handler defined as well.
110    for (var i = 0; i < options.$referenceElements.length; i++) {
111        if (options.$referenceElements[i] != null) {
112            if (options.$referenceElements[i].length > 1) {
113                options.$referenceElements[i].each(function () {
114                	$(this).unbind('click.tooltip').bind('click.tooltip', function (e) {
115                		e.preventDefault();
116                        self.closeTooltip(options);
117                    });
118                });
119            }
120            else {
121            	$(options.$referenceElements[i]).unbind('click.tooltip').bind('click.tooltip', function (e) {
122            		e.preventDefault();
123                    self.closeTooltip(options);
124                });
125            }
126        }
127    }
128};
129
130//Close tooltip
131TooltipClass.prototype.closeTooltip = function (options) {
132
133	var self = this;
134	if (!options.alwaysShow) {
135	    TooltipClass.prototype.HelpToolTips.$dismissTooltipPermanently(options.Id);
136		self.updateTooltipInCookie(options.Id);
137	}
138		
139	$('#' + options.Id).fadeOut();
140	$('#' + options.Id).data('dismiss', 'true');
141};
142
143
144TooltipClass.prototype.updateTooltipInCookie = function(tooltip){
145	var cookieJSON = {};
146	if ($.cookie('tooltips') != null) {
147        var $cookieArr = $.cookie('tooltips').split('&');
148        var found = false;
149        for (var i = 0; i < $cookieArr.length; i++) {
150            var $subSplit = $cookieArr[i].split('=');
151            if ($subSplit[0] == tooltip) {
152                cookieJSON[$subSplit[0]] = '0';
153                found = true;
154            }
155            else
156                cookieJSON[$subSplit[0]] = $subSplit[1];
157        }
158        if (!found){
159            cookieJSON[tooltip] = '0';
160        }
161    }
162    else {
163		cookieJSON[tooltip] = '0';
164	}
165	$.cookie('tooltips', $.param(cookieJSON), { path: '/', expires: 9999 });
166};
167
168// Permanent User Hidden Tooltips
169// https://civicplus.tpondemand.com/entity/14965
170// This block makes use of promises and will reuse resolved promises instead of making new ajax calls.
171(function (global) {
172    var $tooltipsHidden = null;
173
174    var ns = {}; // namespace
175
176    // Promise to get a list of all tooltips hidden.
177    ns.$getTooltipsHidden = function(){ 
178        if ($tooltipsHidden) { // Reuse existing promise if it's been set.
179            return $tooltipsHidden;
180        } else {
181            $tooltipsHidden = $.ajax({ 
182                url: '/help/tooltip/dismiss',
183                dataType: "json",
184                type: 'GET',
185                method: 'GET',
186                ignoreEditor: true,
187                success: function (data) {
188                    tooltips = data;
189                }
190            });
191            return $tooltipsHidden;
192        }
193    }
194
195    // Promise to get if a particular tooltip has been dismissed.
196    ns.$isTooltipDismissed = function (tooltipName) {
197        return ns.$getTooltipsHidden().then(function (data) {
198            for (var i = 0; i < data.length; i++){
199                if (data[i].TooltipName == tooltipName) {
200                    return true;
201                }
202            }
203            return false;
204        })     
205    };
206
207    // Promise to dismiss a tooltip permanently
208    ns.$dismissTooltipPermanently = function (tooltipName) {
209        return $.ajax({
210            url: '/help/tooltip/dismiss',
211            dataType: "json",
212            type: 'POST',
213            method: 'POST',
214            ignoreEditor: true,
215            data: { tooltipName: tooltipName }
216        });
217    };
218
219    global.HelpToolTips = ns; // export
220
221}(TooltipClass.prototype));