New tooltip lib

.meteor/packages

@@ -81,6 +81,7 @@ rocketchat:slashcommands-mute
 rocketchat:spotify
 rocketchat:statistics
 rocketchat:theme
+rocketchat:tooltip
 rocketchat:tutum
 rocketchat:ui
 rocketchat:ui-account

.meteor/versions

@@ -181,6 +181,7 @@ rocketchat:slashcommands-mute@0.0.1
 rocketchat:spotify@0.0.1
 rocketchat:statistics@0.0.1
 rocketchat:theme@0.0.1
+rocketchat:tooltip@0.0.1
 rocketchat:tutum@0.0.1
 rocketchat:ui@0.1.0
 rocketchat:ui-account@0.1.0

packages/rocketchat-tooltip/init.js

+Template.main.onCreated(function() {
+	RocketChat.tooltip.init();
+});

packages/rocketchat-tooltip/loadStylesheet.js

+RocketChat.theme.addPackageAsset(function() {
+	return Assets.getText('tooltip.less');
+});

packages/rocketchat-tooltip/package.js

+Package.describe({
+	name: 'rocketchat:tooltip',
+	version: '0.0.1',
+	summary: '',
+	git: '',
+	documentation: 'README.md'
+});
+
+Package.onUse(function(api) {
+	api.versionsFrom('1.2.1');
+	api.use('ecmascript');
+	api.use('templating', 'client');
+	api.use('rocketchat:lib');
+	api.use('rocketchat:theme');
+	api.use('rocketchat:ui-master');
+
+	api.addAssets('tooltip.less', 'server');
+	api.addFiles('loadStylesheet.js', 'server');
+
+	api.addFiles('rocketchat-tooltip.html', 'client');
+	api.addFiles('rocketchat-tooltip.js', 'client');
+
+	api.addFiles('init.js', 'client');
+});

packages/rocketchat-tooltip/rocketchat-tooltip.html

+<template name="rocketchatTooltip">
+	<div class="tooltip">
+		<div class="content">
+		</div>
+	</div>
+</template>

packages/rocketchat-tooltip/rocketchat-tooltip.js

+/* globals Blaze, RocketChat */
+RocketChat.tooltip = {
+	source: null,
+	initiated: false,
+	opened: false,
+	init() {
+		if (this.initiated) {
+			return;
+		}
+		this.initiated = true;
+
+		Blaze.render(Template.rocketchatTooltip, document.body);
+	},
+	showElement(source, element) {
+		if (this.opened) {
+			return;
+		}
+
+		if (this.timeout) {
+			clearTimeout(this.timeout);
+		}
+
+		this.timeout = setTimeout(() => {
+			this.timeout = null;
+			this.source = source;
+
+			$('.tooltip').empty().append($(element).clone().show());
+
+			this.setPosition().addClass('show');
+
+			this.opened = true;
+		}, 300);
+
+	},
+	hide() {
+		if (this.timeout) {
+			clearTimeout(this.timeout);
+		}
+
+		if (this.opened) {
+			$('.tooltip').removeClass('show').empty();
+			this.opened = false;
+		}
+	},
+	setPosition() {
+		let sourcePos = $(this.source).offset();
+
+		let sourceWidth = $(this.source).outerWidth();
+
+		let top = sourcePos.top - $('.tooltip').outerHeight() - 5;
+		let left = sourcePos.left;
+
+		left = left + (sourceWidth / 2) - ($('.tooltip').outerWidth() / 2);
+
+		if (left < 0) {
+			left = 0;
+		}
+		return $('.tooltip')
+			.css({
+				top: top + 'px',
+				left: left + 'px'
+			});
+	},
+};

packages/rocketchat-tooltip/tooltip.less

+.tooltip {
+	position: absolute;
+	visibility: hidden;
+	background: black;
+	border-radius: 5px;
+	z-index: 300;
+	color: white;
+	padding: 4px;
+	font-size: 0.8rem;
+	opacity: 0;
+
+	.transition(opacity 0.3s ease);
+
+	&.show {
+		visibility: visible;
+		opacity: 0.9;
+	}
+
+	&:after {
+		content: '';
+		position: absolute;
+		top: 100%;
+		left: 50%;
+		margin-left: -5px;
+		width: 0;
+		height: 0;
+		border-top: 5px solid #000000;
+		border-right: 5px solid transparent;
+		border-left: 5px solid transparent;
+	}
+}