[IMPROVE] Message tooltips as everyone else (#15135)

app/reactions/client/init.js

@@ -6,7 +6,7 @@ import { Rooms } from '../../models';
 import { MessageAction } from '../../ui-utils';
 import { messageArgs } from '../../ui-utils/client/lib/messageArgs';
 import { EmojiPicker } from '../../emoji';
-import { tooltip } from '../../tooltip';
+import { tooltip } from '../../ui/client/components/tooltip';
 
 Template.room.events({
 	'click .add-reaction, click [data-message-action="reaction-message"]'(event) {

app/reactions/client/stylesheets/reaction.css

@@ -28,6 +28,8 @@
 					height: 16px;
 					min-height: 16px;
 					margin: -0.2ex 0.15em 0.2ex;
+
+					pointer-events: none; /* to avoid title attribute to trigger a tooltip */
 				}
 			}
 

app/ui-master/client/main.js

@@ -15,7 +15,7 @@ import { settings } from '../../settings';
 import { CachedChatSubscription, Roles, ChatSubscription, Users } from '../../models';
 import { CachedCollectionManager } from '../../ui-cached-collection';
 import { hasRole } from '../../authorization';
-import { tooltip } from '../../tooltip';
+import { tooltip } from '../../ui/client/components/tooltip';
 import { callbacks } from '../../callbacks/client';
 
 function executeCustomScript(script) {

app/ui/client/components/tooltip.css

@@ -0,0 +1,49 @@
+.tooltip {
+	position: absolute;
+	z-index: 300;
+
+	visibility: hidden;
+
+	max-width: 25rem;
+	padding: 0.5em 1em;
+
+	transition: opacity 0.3s ease;
+	text-align: center;
+
+	opacity: 0;
+	color: var(--tooltip-text-color);
+	border-radius: var(--tooltip-radius);
+	background: var(--tooltip-background);
+
+	font-size: var(--tooltip-text-size);
+
+	&.show {
+		visibility: visible;
+
+		opacity: 1;
+	}
+
+	& .tooltip-arrow {
+		position: absolute;
+		top: 100%;
+		left: 50%;
+
+		width: 0;
+		height: 0;
+		margin-left: -6px;
+
+		border-width: 6px 6px 0;
+		border-style: solid;
+		border-color: var(--tooltip-background) transparent transparent transparent;
+	}
+
+	&.below {
+		& .tooltip-arrow {
+			top: -6px;
+
+			border-color: transparent transparent var(--tooltip-background)  transparent;
+
+			border-top: none;
+		}
+	}
+}

app/tooltip/client/rocketchat-tooltip.html → app/ui/client/components/tooltip.html

@@ -1,4 +1,4 @@
-<template name="rocketchatTooltip">
+<template name="tooltip">
 	<div class="tooltip">
 		<div class="content">
 		</div>

app/ui/client/components/tooltip.js

@@ -0,0 +1,94 @@
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+
+import './tooltip.html';
+import './tooltip.css';
+
+let initiated = false;
+
+const init = () => {
+	if (initiated) {
+		return;
+	}
+	initiated = true;
+
+	Blaze.render(Template.tooltip, document.body);
+};
+
+let source = null;
+let opened = false;
+let timeout = null;
+
+const placeTip = () => {
+	const arrowSize = 6;
+	const sourceWidth = $(source).outerWidth();
+	const sourceHeight = $(source).outerHeight();
+	let { left, top } = $(source).offset();
+
+	const tip = $('.tooltip');
+	const tipWidth = tip.outerWidth();
+	const tipHeight = tip.outerHeight();
+
+	left = left + (sourceWidth / 2) - (tipWidth / 2);
+
+	$('.tooltip-arrow', tip).css({
+		'margin-left': left < 0 ? `${ left - arrowSize }px` : '',
+	});
+
+	if (left < 0) {
+		left = 0;
+	}
+
+	top = top - tipHeight - arrowSize;
+
+	tip.toggleClass('below', top < 0);
+
+	if (top < 0) {
+		top = top + sourceHeight + arrowSize;
+	}
+
+	return tip.css({
+		left: `${ left }px`,
+		top: `${ top }px`,
+	});
+};
+
+const showElement = (element, sourceElement) => {
+	if (opened) {
+		return;
+	}
+
+	if (timeout) {
+		clearTimeout(timeout);
+	}
+
+	const elementClone = $(element).clone();
+
+	timeout = setTimeout(() => {
+		timeout = null;
+		source = sourceElement;
+
+		$('.tooltip .content').empty().append(elementClone.show());
+		placeTip().addClass('show');
+
+		opened = true;
+	}, 300);
+};
+
+const hide = () => {
+	if (timeout) {
+		clearTimeout(timeout);
+	}
+
+	if (opened) {
+		$('.tooltip').removeClass('show');
+		$('.tooltip .content').empty();
+		opened = false;
+	}
+};
+
+export const tooltip = {
+	init,
+	showElement,
+	hide,
+};

app/ui/client/index.js

@@ -59,6 +59,7 @@ import './components/header/headerRoom.html';
 import './components/header/headerRoom';
 import './components/contextualBar.html';
 import './components/contextualBar';
+import './components/tooltip';
 
 export { ChatMessages } from './lib/chatMessages';
 export { fileUpload } from './lib/fileUpload';

client/importPackages.js

@@ -71,7 +71,6 @@ import '../app/slider';
 import '../app/spotify/client';
 import '../app/theme/client';
 import '../app/tokenpass/client';
-import '../app/tooltip';
 import '../app/ui';
 import '../app/ui-account';
 import '../app/ui-admin/client';

client/importsCss.js

@@ -33,7 +33,6 @@ import '../app/search/client/style/style.css';
 import '../app/tokenpass/client/login-button.css';
 import '../app/tokenpass/client/channelSettings.css';
 import '../app/tokenpass/client/styles.css';
-import '../app/tooltip/client/tooltip.css';
 import '../app/ui-clean-history/client/views/stylesheets/cleanHistory.css';
 import '../app/ui-vrecord/client/vrecord.css';
 import '../app/videobridge/client/stylesheets/video.less';