Add better positioning for tooltips on edges (#13472)

packages/rocketchat-ui-flextab/client/flexTabBar.html

@@ -35,7 +35,7 @@
 		<div class="rc-room-actions iframe-toolbar">
 			{{#each .}}
 			<div class="rc-room-actions__action tab-button {{active}} {{visible}} {{class}} js-iframe-action" data-id="{{id}}">
-				<button class="rc-tooltip rc-tooltip--down rc-room-actions__button" aria-label="{{title}}">
+				<button class="rc-tooltip rc-tooltip--down rc-tooltip--end rc-room-actions__button" aria-label="{{title}}">
 					{{> icon block="tab-button-icon" icon=icon }}
 				</button>
 			</div>
@@ -45,14 +45,14 @@
 	<div class="rc-room-actions">
 		{{#each buttons}}
 		<div class="rc-room-actions__action tab-button {{active}} {{visible}} {{class}} js-action" data-id="{{id}}">
-			<button class="rc-tooltip rc-tooltip--down rc-room-actions__button" aria-label="{{title}}">
+			<button class="rc-tooltip rc-tooltip--down rc-tooltip--end rc-room-actions__button" aria-label="{{title}}">
 				{{> icon block="tab-button-icon" icon=icon }}
 			</button>
 		</div>
 		{{/each}}
 	 	{{# with moreButtons}}
 		<div class="rc-room-actions__action {{opened}}">
-			<button class="rc-tooltip rc-tooltip--down rc-room-actions__button js-more" aria-label="{{_ 'More'}}">
+			<button class="rc-tooltip rc-tooltip--down rc-tooltip--end rc-room-actions__button js-more" aria-label="{{_ 'More'}}">
 				{{> icon block="tab-button-icon" icon="menu" }}
 			</button>
 		</div>

packages/rocketchat_theme/client/imports/components/tooltip.css

@@ -1,5 +1,6 @@
 .rc-tooltip {
 	position: relative;
+	--translation-x: -50%;
 
 	&::before,
 	&::after {
@@ -9,7 +10,7 @@
 		left: 50%;
 
 		transition: all 0.18s ease-out 0.18s;
-		transform: translate(-50%, 10px);
+		transform: translate(var(--translation-x), 10px);
 		transform-origin: top;
 		pointer-events: none;
 
@@ -61,6 +62,16 @@
 			border-color: transparent transparent var(--tooltip-background)  transparent;
 		}
 	}
+
+	&--start,
+	.rtl &--end {
+		--translation-x: -10%;
+	}
+
+	&--end,
+	.rtl &--start {
+		--translation-x: -90%;
+	}
 }
 
 @media (min-width: 501px) {
@@ -69,7 +80,7 @@
 		&:hover::after,
 		&:focus::before,
 		&:focus::after {
-			transform: translate(-50%, 0);
+			transform: translate(var(--translation-x), 0);
 			pointer-events: auto;
 
 			opacity: 1;