Global Events in Meteor

Unlike template helpers which can be added globally via registerHelpers, in Meteor, global events are DIY.

While adding tooltips to our upcoming web app, we needed to add click events to multiple templates and Template.body.events wasn’t going to work for our setup. So, we did a simple little workaround and used a jQuery plugin.

jQuery Tooltip Global Event Plugin for Meteor JS

// Global event handling for tooltips to appear anywhere and on multiple templates

/client/lib/jquery.toolTips.js

(function( $ ){
  $.fn.toolTips = function() {
	$( $('[data-tooltip]') ).each(function( index ) {	
		$(this).click(function(event) {
			// remove any currently active tooltips
			$('[data-tooltip]').not(event.target).removeClass('active');			
			// show the tooltip just clicked
			$(event.target).toggleClass('active');
			// simple responsive starter
			if ($(window).width() < 420) {
				$( '.tooltip-left' ).removeClass('tooltip-left').addClass('tooltip');
				$( '.tooltip-right' ).removeClass('tooltip-right').addClass('tooltip');
			}						
			});		
		});
  };
})( jQuery );

With that, we call the plugin once $(document).toolTips(); from a template that exists on every page of the app (footer, header, nav, etc) and like magic, our tooltips are working globally without messy, redundant event code.

See the previous post for a source example and more on tooltips. Recode the plugin to whatever your global event needs may be, or pack it up with the CSS from the prior post for a straightforward way to handle tool tips.

New! Check out MemLife, an app to preserve the memories and stories of life, simply and privately.