https://www.hawaiiactivities.com/ac2020/js/vtooltips.js?1790105626

1/* eslint-disable */
2
3(function($) {
4	var defaults = {
5		placement: 'top', 
6	}
7
8	const Trigger = {
9  		HOVER  : 'hover',
10  		CLICK  : 'click'
11	}
12
13	var ListenerEvent = Trigger.HOVER;
14
15	const HoverState = {
16		SHOW : 'show'
17	}
18
19	const ClassName = {
20		SHOW   : 'show',
21		TOP    : 'placement-top',
22		LEFT   : 'placement-left',
23		BOTTOM : 'placement-bottom',
24		RIGHT  : 'placement-right'
25	}
26
27	const Selector = {
28		TOOLTIP       : 'tooltip',
29		TOOLTIP_INNER : 'tooltip-inner',
30		//ARROW         : 'arrow'
31	}
32
33	var Tooltips = function(element, options) {
34		this.element = element;
35		this.options = options;
36		this.construct();
37	};
38
39	Tooltips.prototype = {
40		constructor: Tooltips,
41
42		_setListeners: function() {
43			var obj = this;
44			var _this = this.element;
45
46			if(ListenerEvent == Trigger.CLICK){
47				this.element.on(ListenerEvent, function(){
48					obj.checkAndResetTooltipPosition('displayed'); // check and reset tooltip position if it is necessary
49					_this.find('.' + Selector.TOOLTIP).toggleClass(HoverState.SHOW);
50					if(_this.find('.' + Selector.TOOLTIP).hasClass(HoverState.SHOW)){
51						obj.checkAndResetTooltipPosition('displayed'); // check and reset tooltip position if it is necessary
52					} else {
53						obj.checkAndResetTooltipPosition('default'); // check and reset tooltip position if it is necessary
54					}
55				});
56			} else {
57				this.element.on('mouseenter', function(){
58					obj.checkAndResetTooltipPosition('default'); // check and reset tooltip position if it is necessary
59					_this.find('.' + Selector.TOOLTIP).addClass(HoverState.SHOW);
60					obj.checkAndResetTooltipPosition('displayed'); // check and reset tooltip position if it is necessary
61				})
62				.on('mouseleave', function(){
63					_this.find('.' + Selector.TOOLTIP).removeClass(HoverState.SHOW);
64					obj.checkAndResetTooltipPosition('default'); // check and reset tooltip position if it is necessary
65				});
66			}
67		},
68
69		setEvent: function(val) {
70			var _event = val;
71			if(typeof _event === 'undefined'){
72				_event = Trigger.HOVER;
73			} else {
74				_event = _event.toLowerCase();
75			}
76		    return _event;
77		},
78
79		getTitle: function(val) {
80			var title = val;
81			if(typeof title === 'undefined'){
82				title = '';
83			}
84		    return title;
85		},
86
87		getPlacement: function(val) {
88			var placement = val;
89			if(typeof placement === 'undefined' || placement === ''){
90				placement = defaults.placement;
91			}
92			//defaults.placement = placement;
93			placement = placement.toLowerCase();
94			return placement;
95		},
96
97		setTooltipPosition: function(elem, pos) {
98			var tooltipPosition = pos;
99			if(tooltipPosition == 'left'){
100				elem.className += ' ' + ClassName.LEFT;
101			} else if(tooltipPosition == 'bottom'){
102				elem.className += ' ' + ClassName.BOTTOM;
103			} else if(tooltipPosition == 'right'){
104				elem.className += ' ' + ClassName.RIGHT;
105			} else {
106				elem.className += ' ' + ClassName.TOP;
107			}
108			return elem;
109		},
110
111		setTriggerPosition: function(elem) {
112			elem.addClass('position-relative');
113			return elem;
114		},
115
116		checkAndResetTooltipPosition: function(evt) {
117			var tooltip = $(this.element).find('.' + Selector.TOOLTIP);
118			var tooltipPlacement = this.getPlacement(this.element.attr('data-placement'));
119
120			if(evt == 'default'){
121
122				$(tooltip).removeClass('edge-left');
123				$(tooltip).removeClass('edge-right');
124
125				if(tooltipPlacement == 'left' || tooltipPlacement == 'right'){
126					// re-position tooltip if tooltip's height is greater than its trigger element
127					if(tooltip.outerHeight() > $(this.element).outerHeight()){
128						var value = ($(tooltip).outerHeight() - $(this.element).outerHeight()) / 2;
129						value = '-' + value;
130						$(tooltip).css('top', parseInt(value)) ;
131					}
132				}
133
134				if(tooltipPlacement == 'top' || tooltipPlacement == 'bottom'){
135					// re-position tooltip if tooltip's width is greater than its trigger element
136					if(tooltip.outerWidth() > $(this.element).outerWidth()){
137						var value = ($(tooltip).outerWidth() - $(this.element).outerWidth()) / 2;
138						value = '-' + value;
139						$(tooltip).css('left', parseInt(value)) ;
140					}
141				}
142			} else if(evt == 'displayed'){
143				var offset = $(tooltip).offset();
144				var posX = offset.left - $(window).scrollLeft();
145
146				var tooltipWidth = $(tooltip).outerWidth();
147				tooltipWidth = tooltipWidth + offset.left
148				var screenWidth = $(window).width();
149
150				// if tooltip exceed left / right edge of viewport
151				if(posX < 0){
152					if(tooltipPlacement == 'top' || tooltipPlacement == 'bottom'){
153						$(tooltip).css('left', '-15px') ;
154						$(tooltip).addClass('edge-left');
155					}
156				} else if(tooltipWidth > screenWidth){
157					if(tooltipPlacement == 'top' || tooltipPlacement == 'bottom'){
158						$(tooltip).css('left', 'auto');
159						$(tooltip).css('right', '-15px');
160						$(tooltip).addClass('edge-right');
161					}
162				}
163			}
164		},
165
166		templateTooltip: function() {
167			var tooltip = document.createElement('div');
168			tooltip.className = Selector.TOOLTIP;
169			//var tooltipArrow = document.createElement('div');
170			//tooltipArrow.className = Selector.ARROW;
171			var tooltipInner = document.createElement('div');
172			tooltipInner.className = Selector.TOOLTIP_INNER;
173			tooltipInner.innerHTML = this.getTitle(this.element.attr('data-title'));
174
175			//tooltip.appendChild(tooltipArrow);
176			tooltip.appendChild(tooltipInner);
177			
178
179			this.setTooltipPosition(tooltip, this.getPlacement(this.element.attr('data-placement')));
180			this.setTriggerPosition(this.element);
181
182			ListenerEvent = this.setEvent(this.options.eventListener);
183
184			return tooltip;
185		},
186
187		construct: function() {
188			this.element.append(this.templateTooltip());
189			this._setListeners();
190			this.checkAndResetTooltipPosition('default'); // check and reset tooltip position if it is necessary
191		}
192	}
193
194
195	$.fn.vtooltips = function(options) {
196	    var implementOptions = $.extend(true, {}, defaults, options);
197	    var vtooltips = new Tooltips($(this), implementOptions);
198	    return vtooltips;
199  	};
200
201})(jQuery);