From 9a2a6f2acf90164e22f6a1e58128da69681bfe86 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 17 Dec 2020 16:51:26 -0500
Subject: [PATCH] 4.20.56

* Fixed: Appearance issues caused by Twitch making changes to their site CSS, including white backgrounds for icons and incorrect placement of menus.
---
 package.json                                  |   2 +-
 src/modules/chat/override-editor.vue          |   4 +-
 src/modules/main_menu/components/addon.vue    |   2 +-
 .../components/badge-term-editor.vue          |  14 +-
 .../main_menu/components/badge-visibility.vue |   4 +-
 .../components/blocked-type-editor.vue        |   6 +-
 .../main_menu/components/changelog.vue        |   2 +-
 .../main_menu/components/chat-actions.vue     |   8 +-
 .../main_menu/components/chat-reasons.vue     |   4 +-
 .../main_menu/components/experiments.vue      |   8 +-
 .../components/filter-rule-editor.vue         |  10 +-
 .../main_menu/components/game-list-editor.vue |   2 +-
 .../main_menu/components/main-menu.vue        |   2 +-
 .../main_menu/components/profile-editor.vue   |   4 +-
 .../main_menu/components/profile-manager.vue  |  14 +-
 .../main_menu/components/profile-selector.vue |   6 +-
 .../main_menu/components/reason-editor.vue    |  12 +-
 .../components/setting-check-box.vue          |   2 +-
 .../components/setting-color-box.vue          |   2 +-
 .../components/setting-combo-box.vue          |   2 +-
 .../components/setting-select-box.vue         |   2 +-
 .../main_menu/components/setting-text-box.vue |   2 +-
 .../main_menu/components/term-editor.vue      |  18 +-
 src/modules/metadata.jsx                      |   6 +-
 .../translation_ui/components/i18n-entry.vue  |   2 +-
 .../components/translation-ui.vue             |  24 +-
 src/settings/components/if.vue                |   4 +-
 src/settings/components/title.vue             |   6 +-
 .../modules/chat/emote_menu.jsx               | 281 +++++++++---------
 .../twitch-twilight/modules/chat/input.jsx    |   7 +
 .../twitch-twilight/modules/chat/line.js      |   4 +-
 .../css_tweaks/styles/theatre-metadata.scss   |   2 +-
 .../modules/directory/index.jsx               |   2 +-
 .../twitch-twilight/modules/menu_button.jsx   |  96 +++---
 src/sites/twitch-twilight/modules/player.jsx  |   8 +-
 .../modules/video_chat/index.jsx              |   4 +-
 src/sites/twitch-twilight/styles/channel.scss |   2 +-
 src/std-components/icon-picker.vue            |   2 +-
 src/std-components/tooltip.vue                |   2 +-
 39 files changed, 299 insertions(+), 285 deletions(-)

diff --git a/package.json b/package.json
index 2384ad46..b03afc6e 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.20.55",
+  "version": "4.20.56",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {
diff --git a/src/modules/chat/override-editor.vue b/src/modules/chat/override-editor.vue
index c364e609..b0ab37c5 100644
--- a/src/modules/chat/override-editor.vue
+++ b/src/modules/chat/override-editor.vue
@@ -26,7 +26,7 @@
 			>
 
 			<button
-				class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
 				:class="{'tw-button--disabled': name == null}"
 				@click="clearName"
 			>
@@ -52,7 +52,7 @@
 			/>
 
 			<button
-				class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
 				:class="{'tw-button--disabled': color == null}"
 				@click="clearColor"
 			>
diff --git a/src/modules/main_menu/components/addon.vue b/src/modules/main_menu/components/addon.vue
index 4d518d47..fb615a0f 100644
--- a/src/modules/main_menu/components/addon.vue
+++ b/src/modules/main_menu/components/addon.vue
@@ -50,7 +50,7 @@
 					<button
 						v-if="external"
 						disabled
-						class="tw-button ffz-button--hollow tw-button--disabled tw-tooltip-wrapper tw-mg-r-1"
+						class="tw-button ffz-button--hollow tw-button--disabled tw-tooltip__container tw-mg-r-1"
 					>
 						<span class="tw-button__icon tw-button__icon--left">
 							<figure class="ffz-i-trash" />
diff --git a/src/modules/main_menu/components/badge-term-editor.vue b/src/modules/main_menu/components/badge-term-editor.vue
index 61d2aec2..fee71e20 100644
--- a/src/modules/main_menu/components/badge-term-editor.vue
+++ b/src/modules/main_menu/components/badge-term-editor.vue
@@ -43,7 +43,7 @@
 					</figure>
 				</div>
 			</div>
-			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip-wrapper">
+			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip__container">
 				<button
 					v-if="editing"
 					:class="{active: edit_data.remove}"
@@ -76,13 +76,13 @@
 				</button>
 			</div>
 			<div v-else-if="editing" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
 					<span class="tw-button__text ffz-i-floppy" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.save', 'Save') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="cancel">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -90,13 +90,13 @@
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', term)">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -104,13 +104,13 @@
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="edit">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
 					<span class="tw-button__text ffz-i-cog" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.edit', 'Edit') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
diff --git a/src/modules/main_menu/components/badge-visibility.vue b/src/modules/main_menu/components/badge-visibility.vue
index fb47e497..371b4a0c 100644
--- a/src/modules/main_menu/components/badge-visibility.vue
+++ b/src/modules/main_menu/components/badge-visibility.vue
@@ -12,7 +12,7 @@
 			<button
 				:disabled="! has_value"
 				:class="{'tw-button--disabled': ! has_value}"
-				class="tw-mg-l-05 tw-button ffz-button--hollow tw-tooltip-wrapper"
+				class="tw-mg-l-05 tw-button ffz-button--hollow tw-tooltip__container"
 				@click="clear"
 			>
 				<span class="tw-button__icon tw-button__icon--left">
@@ -93,7 +93,7 @@
 									/>
 								</section>
 								<button
-									class="tw-mg-t-05 tw-button ffz-button--hollow tw-tooltip-wrapper"
+									class="tw-mg-t-05 tw-button ffz-button--hollow tw-tooltip__container"
 									@click="reset(i.id)"
 								>
 									<span class="tw-button__text">Reset</span>
diff --git a/src/modules/main_menu/components/blocked-type-editor.vue b/src/modules/main_menu/components/blocked-type-editor.vue
index 22e09e3b..f1824db4 100644
--- a/src/modules/main_menu/components/blocked-type-editor.vue
+++ b/src/modules/main_menu/components/blocked-type-editor.vue
@@ -27,13 +27,13 @@
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', term)">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -41,7 +41,7 @@
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
diff --git a/src/modules/main_menu/components/changelog.vue b/src/modules/main_menu/components/changelog.vue
index 08014d6d..b31bf590 100644
--- a/src/modules/main_menu/components/changelog.vue
+++ b/src/modules/main_menu/components/changelog.vue
@@ -11,7 +11,7 @@
 
 		<div v-if=" ! addons" class="tw-mg-b-1 tw-flex tw-align-items-center">
 			<div class="tw-flex-grow-1" />
-			<div class="tw-checkbox tw-relative tw-tooltip-wrapper">
+			<div class="tw-checkbox tw-relative tw-tooltip__container">
 				<input
 					id="nonversioned"
 					ref="nonversioned"
diff --git a/src/modules/main_menu/components/chat-actions.vue b/src/modules/main_menu/components/chat-actions.vue
index fc7daa52..dea7a77a 100644
--- a/src/modules/main_menu/components/chat-actions.vue
+++ b/src/modules/main_menu/components/chat-actions.vue
@@ -281,7 +281,7 @@
 			</div>
 			<button
 				v-if="! maybe_clear && val.length"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
 				@click="maybe_clear = true"
 			>
 				<span class="tw-button__text ffz-i-trash">
@@ -293,7 +293,7 @@
 			</button>
 			<button
 				v-if="maybe_clear"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
 				@click="doClear"
 			>
 				<span class="tw-button__text ffz-i-trash">
@@ -305,7 +305,7 @@
 			</button>
 			<button
 				v-if="maybe_clear"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
 				@click="maybe_clear = false"
 			>
 				<span class="tw-button__text ffz-i-cancel">
@@ -314,7 +314,7 @@
 			</button>
 			<button
 				v-if="! val.length && has_default"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
 				@click="populate"
 			>
 				<span class="tw-button__text ffz-i-trash">
diff --git a/src/modules/main_menu/components/chat-reasons.vue b/src/modules/main_menu/components/chat-reasons.vue
index f3adda51..d1f5e88f 100644
--- a/src/modules/main_menu/components/chat-reasons.vue
+++ b/src/modules/main_menu/components/chat-reasons.vue
@@ -6,7 +6,7 @@
 			</div>
 			<button
 				v-if="! empty"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
 				@click="clear"
 			>
 				<span class="tw-button__text ffz-i-trash">
@@ -18,7 +18,7 @@
 			</button>
 			<button
 				v-if="empty"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
+				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
 				@click="populate"
 			>
 				<span class="tw-button__text ffz-i-trash">
diff --git a/src/modules/main_menu/components/experiments.vue b/src/modules/main_menu/components/experiments.vue
index cd9f61c1..8fc1e54b 100644
--- a/src/modules/main_menu/components/experiments.vue
+++ b/src/modules/main_menu/components/experiments.vue
@@ -105,7 +105,7 @@
 							<button
 								:disabled="exp.default"
 								:class="{'tw-button--disabled': exp.default}"
-								class="tw-mg-t-05 tw-button tw-button--text tw-tooltip-wrapper"
+								class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
 								@click="reset(key)"
 							>
 								<span class="tw-button__text ffz-i-cancel" />
@@ -147,12 +147,12 @@
 						class="ffz--experiment-row tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex"
 					>
 						<div v-if="unused" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-r tw-mg-r-1 tw-pd-r-1">
-							<div v-if="exp.in_use" class="ffz--profile__icon ffz-i-ok tw-tooltip-wrapper">
+							<div v-if="exp.in_use" class="ffz--profile__icon ffz-i-ok tw-tooltip__container">
 								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 									{{ t('setting.experiments.active', 'This experiment is active.') }}
 								</div>
 							</div>
-							<div v-else class="ffz--profile__icon ffz-i-cancel tw-tooltip-wrapper">
+							<div v-else class="ffz--profile__icon ffz-i-cancel tw-tooltip__container">
 								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 									{{ t('setting.experiments.inactive', 'This experiment is not active.') }}
 								</div>
@@ -190,7 +190,7 @@
 							<button
 								:disabled="exp.default"
 								:class="{'tw-button--disabled': exp.default}"
-								class="tw-mg-t-05 tw-button tw-button--text tw-tooltip-wrapper"
+								class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
 								@click="resetTwitch(key)"
 							>
 								<span class="tw-button__text ffz-i-cancel" />
diff --git a/src/modules/main_menu/components/filter-rule-editor.vue b/src/modules/main_menu/components/filter-rule-editor.vue
index bd6590f2..d1c29705 100644
--- a/src/modules/main_menu/components/filter-rule-editor.vue
+++ b/src/modules/main_menu/components/filter-rule-editor.vue
@@ -14,7 +14,7 @@
 
 		<div
 			v-if="isShort"
-			class="tw-mg-l-1 tw-pd-x-1 tw-border-l tw-flex tw-align-items-center ffz--profile__icon tw-relative tw-tooltip-wrapper"
+			class="tw-mg-l-1 tw-pd-x-1 tw-border-l tw-flex tw-align-items-center ffz--profile__icon tw-relative tw-tooltip__container"
 		>
 			<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
 			<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
@@ -31,7 +31,7 @@
 			:class="[isShort ? '' : 'tw-mg-l-1']"
 			class="tw-border-l tw-pd-l-1 tw-flex tw-flex-column tw-flex-wrap tw-justify-content-start tw-align-items-start"
 		>
-			<div v-if="! isShort" class="tw-mg-b-1 tw-border-b tw-pd-b-1 tw-full-width tw-flex tw-justify-content-center ffz--profile__icon tw-relative tw-tooltip-wrapper">
+			<div v-if="! isShort" class="tw-mg-b-1 tw-border-b tw-pd-b-1 tw-full-width tw-flex tw-justify-content-center ffz--profile__icon tw-relative tw-tooltip__container">
 				<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
 				<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
 					<span v-if="passes">
@@ -44,13 +44,13 @@
 			</div>
 
 			<template v-if="deleting">
-				<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="$emit('delete')">
+				<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="$emit('delete')">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="deleting = false">
+				<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -58,7 +58,7 @@
 				</button>
 			</template>
 			<template v-else>
-				<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="deleting = true">
+				<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
diff --git a/src/modules/main_menu/components/game-list-editor.vue b/src/modules/main_menu/components/game-list-editor.vue
index cc0eef3f..7cceb61f 100644
--- a/src/modules/main_menu/components/game-list-editor.vue
+++ b/src/modules/main_menu/components/game-list-editor.vue
@@ -65,7 +65,7 @@
 					</span>
 				</div>
 				<div class="tw-flex-shrink-0">
-					<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="remove(i)">
+					<button class="tw-button tw-button--text tw-tooltip__container" @click="remove(i)">
 						<span class="tw-button__text ffz-i-trash" />
 						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 							{{ t('setting.delete', 'Delete') }}
diff --git a/src/modules/main_menu/components/main-menu.vue b/src/modules/main_menu/components/main-menu.vue
index 1dc6e8e3..409ada99 100644
--- a/src/modules/main_menu/components/main-menu.vue
+++ b/src/modules/main_menu/components/main-menu.vue
@@ -33,7 +33,7 @@
 					<figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
 				</span>
 			</button>
-			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="popout">
+			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="popout">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-link-ext" />
 				</span>
diff --git a/src/modules/main_menu/components/profile-editor.vue b/src/modules/main_menu/components/profile-editor.vue
index af6b0ebb..f9b359eb 100644
--- a/src/modules/main_menu/components/profile-editor.vue
+++ b/src/modules/main_menu/components/profile-editor.vue
@@ -42,7 +42,7 @@
 				</div>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip__container"
 				@click="resetExport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -57,7 +57,7 @@
 				{{ export_message }}
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip__container"
 				@click="resetExport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
diff --git a/src/modules/main_menu/components/profile-manager.vue b/src/modules/main_menu/components/profile-manager.vue
index e9f118f7..c6a6b86d 100644
--- a/src/modules/main_menu/components/profile-manager.vue
+++ b/src/modules/main_menu/components/profile-manager.vue
@@ -32,7 +32,7 @@
 				</div>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -47,7 +47,7 @@
 				{{ import_message }}
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -66,7 +66,7 @@
 				<button
 					v-for="(profile, idx) in import_profiles"
 					:key="idx"
-					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay tw-relative tw-tooltip-wrapper"
+					class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay tw-relative tw-tooltip__container"
 					@click="importProfile(profile)"
 				>
 					<span class="tw-button__text tw-c-text-overlay">
@@ -78,7 +78,7 @@
 				</button>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -113,7 +113,7 @@
 				</button>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
+				class="tw-button tw-button--text tw-relative tw-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
@@ -138,7 +138,7 @@
 						<span class="ffz-i-ellipsis-vert" />
 					</div>
 
-					<div v-if="p.url" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative tw-tooltip-wrapper tw-font-size-4">
+					<div v-if="p.url" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative tw-tooltip__container tw-font-size-4">
 						<span class="ffz-i-download-cloud" />
 						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 							<div class="tw-mg-b-05">
@@ -171,7 +171,7 @@
 									'ffz-i-cancel': ! p.toggled,
 									'ffz-i-minus': p.toggled && ! p.live
 								}"
-								class="ffz--profile__icon tw-relative tw-tooltip-wrapper"
+								class="ffz--profile__icon tw-relative tw-tooltip__container"
 							>
 								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 									<span v-if="p.live">
diff --git a/src/modules/main_menu/components/profile-selector.vue b/src/modules/main_menu/components/profile-selector.vue
index dfdfd2bd..21eb70cf 100644
--- a/src/modules/main_menu/components/profile-selector.vue
+++ b/src/modules/main_menu/components/profile-selector.vue
@@ -18,7 +18,7 @@
 		<div
 			v-if="opened"
 			v-on-clickaway="hide"
-			class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left"
+			class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left tw-z-above"
 		>
 			<div
 				class="ffz--profile-list tw-elevation-2 tw-c-background-alt"
@@ -53,7 +53,7 @@
 							>
 								<div
 									v-if="! p.toggled"
-									class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-cancel tw-absolute"
+									class="tw-tooltip__container ffz--profile-row__icon ffz-i-cancel tw-absolute"
 								>
 									<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 										{{ t('setting.profiles.disabled', 'This profile is disabled.') }}
@@ -61,7 +61,7 @@
 								</div>
 								<div
 									v-if="p.live"
-									class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-ok tw-absolute"
+									class="tw-tooltip__container ffz--profile-row__icon ffz-i-ok tw-absolute"
 								>
 									<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 										{{ t('setting.profiles.active', 'This profile is enabled and active.') }}
diff --git a/src/modules/main_menu/components/reason-editor.vue b/src/modules/main_menu/components/reason-editor.vue
index 694172a2..1c61938c 100644
--- a/src/modules/main_menu/components/reason-editor.vue
+++ b/src/modules/main_menu/components/reason-editor.vue
@@ -23,13 +23,13 @@
 				</button>
 			</div>
 			<div v-else-if="editing" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
 					<span class="tw-button__text ffz-i-floppy" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.save', 'Save') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="cancel">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -37,13 +37,13 @@
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', reason)">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', reason)">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -51,13 +51,13 @@
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="edit">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
 					<span class="tw-button__text ffz-i-cog" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.edit', 'Edit') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
diff --git a/src/modules/main_menu/components/setting-check-box.vue b/src/modules/main_menu/components/setting-check-box.vue
index 91c2c8b5..ad02cda0 100644
--- a/src/modules/main_menu/components/setting-check-box.vue
+++ b/src/modules/main_menu/components/setting-check-box.vue
@@ -39,7 +39,7 @@
 			</button>
 
 			<div class="ffz--reset-button">
-				<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+				<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.reset', 'Reset to Default') }}
diff --git a/src/modules/main_menu/components/setting-color-box.vue b/src/modules/main_menu/components/setting-color-box.vue
index 14eee276..1055ff11 100644
--- a/src/modules/main_menu/components/setting-color-box.vue
+++ b/src/modules/main_menu/components/setting-color-box.vue
@@ -37,7 +37,7 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
diff --git a/src/modules/main_menu/components/setting-combo-box.vue b/src/modules/main_menu/components/setting-combo-box.vue
index 16cc1d17..2dcacbb9 100644
--- a/src/modules/main_menu/components/setting-combo-box.vue
+++ b/src/modules/main_menu/components/setting-combo-box.vue
@@ -54,7 +54,7 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-mg-y-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-mg-y-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
diff --git a/src/modules/main_menu/components/setting-select-box.vue b/src/modules/main_menu/components/setting-select-box.vue
index b652e6e2..eba4585a 100644
--- a/src/modules/main_menu/components/setting-select-box.vue
+++ b/src/modules/main_menu/components/setting-select-box.vue
@@ -60,7 +60,7 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
diff --git a/src/modules/main_menu/components/setting-text-box.vue b/src/modules/main_menu/components/setting-text-box.vue
index 53eee8c8..361c8daf 100644
--- a/src/modules/main_menu/components/setting-text-box.vue
+++ b/src/modules/main_menu/components/setting-text-box.vue
@@ -37,7 +37,7 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
diff --git a/src/modules/main_menu/components/term-editor.vue b/src/modules/main_menu/components/term-editor.vue
index 330f5d6c..8c68c7e5 100644
--- a/src/modules/main_menu/components/term-editor.vue
+++ b/src/modules/main_menu/components/term-editor.vue
@@ -1,13 +1,13 @@
 <template lang="html">
 	<div class="ffz--term">
 		<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
-			<div v-if="! is_valid" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
+			<div v-if="! is_valid" class="tw-relative tw-tooltip__container tw-mg-r-05">
 				<figure class="tw-c-text-error ffz-i-attention" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 					{{ t('setting.terms.warn-invalid', 'This highlight term is invalid.') }}
 				</div>
 			</div>
-			<div v-if="! is_safe" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
+			<div v-if="! is_safe" class="tw-relative tw-tooltip__container tw-mg-r-05">
 				<figure class="tw-c-text-hint ffz-i-attention" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 					{{ t('setting.terms.warn-complex', 'This highlight term is potentially too complex. It may cause client lag.') }}
@@ -56,7 +56,7 @@
 					</option>
 				</select>
 			</div>
-			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip-wrapper">
+			<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip__container">
 				<button
 					v-if="editing"
 					:class="{active: edit_data.remove}"
@@ -89,13 +89,13 @@
 				</button>
 			</div>
 			<div v-else-if="editing" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
 					<span class="tw-button__text ffz-i-floppy" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.save', 'Save') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="cancel">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -103,13 +103,13 @@
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', term)">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
@@ -117,13 +117,13 @@
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="edit">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
 					<span class="tw-button__text ffz-i-cog" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.edit', 'Edit') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
+				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
diff --git a/src/modules/metadata.jsx b/src/modules/metadata.jsx
index 2b654c79..c4498438 100644
--- a/src/modules/metadata.jsx
+++ b/src/modules/metadata.jsx
@@ -225,7 +225,7 @@ export default class Metadata extends Module {
 							value={url}
 							onFocus={e => e.target.select()}
 						/>
-						{can_copy && <div class="tw-relative tw-tooltip-wrapper tw-mg-l-1">
+						{can_copy && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
 							<button
 								class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 								aria-label={ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
@@ -639,7 +639,7 @@ export default class Metadata extends Module {
 
 					if ( def.popup && def.click ) {
 						el = (<div
-							class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip-wrapper ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05 ffz-mg-l--05'}`}
+							class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip__container ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05 ffz-mg-l--05'}`}
 							data-key={key}
 							tip_content={null}
 						>
@@ -766,7 +766,7 @@ export default class Metadata extends Module {
 						icon = (<span class="tw-stat__icon"><figure class={icon} /></span>);
 
 					el = (<div
-						class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip-wrapper ffz-stat tw-stat tw-mg-r-1${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
+						class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip__container ffz-stat tw-stat tw-mg-r-1${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
 						data-tooltip-type="metadata"
 						data-key={key}
 						tip_content={null}
diff --git a/src/modules/translation_ui/components/i18n-entry.vue b/src/modules/translation_ui/components/i18n-entry.vue
index 419e03bd..3f3e1d8a 100644
--- a/src/modules/translation_ui/components/i18n-entry.vue
+++ b/src/modules/translation_ui/components/i18n-entry.vue
@@ -93,7 +93,7 @@
 			</div>
 
 			<button
-				class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip-wrapper"
+				class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
 				@click="open = false"
 			>
 				<span class="tw-button-icon__icon">
diff --git a/src/modules/translation_ui/components/translation-ui.vue b/src/modules/translation_ui/components/translation-ui.vue
index d555820d..992ec53c 100644
--- a/src/modules/translation_ui/components/translation-ui.vue
+++ b/src/modules/translation_ui/components/translation-ui.vue
@@ -26,7 +26,7 @@
 					</div>
 				</div>
 			</div>
-			<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="saveBlob">
+			<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="saveBlob">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-floppy" />
 				</span>
@@ -34,7 +34,7 @@
 					{{ t('i18n.ui.save', 'Generate Change Blob') }}
 				</div>
 			</button>
-			<button v-if="can_upload" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="uploadBlob">
+			<button v-if="can_upload" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="uploadBlob">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-upload-cloud" />
 				</span>
@@ -42,7 +42,7 @@
 					{{ t('i18n.ui.upload', 'Upload Changes') }}
 				</div>
 			</button>
-			<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="requestKeys">
+			<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="requestKeys">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-arrows-cw" />
 				</span>
@@ -55,7 +55,7 @@
 					<figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
 				</span>
 			</button>
-			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="popout">
+			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="popout">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-link-ext" />
 				</span>
@@ -76,7 +76,7 @@
 		</header>
 		<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-column tw-overflow-hidden">
 			<header class="tw-border-b tw-pd-05 tw-c-background-base tw-flex tw-align-items-center">
-				<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper" @click="prevPage">
+				<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-left-dir" />
 					</span>
@@ -105,7 +105,7 @@
 					@keydown.enter="closePage"
 					@blur="closePage"
 				>
-				<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper" @click="nextPage">
+				<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-right-dir" />
 					</span>
@@ -115,7 +115,7 @@
 				</button>
 				<div class="tw-flex-grow-1" />
 				<button
-					class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
+					class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
 					:class="[mode === 0 ? 'tw-core-button--primary' : 'tw-core-button--text']"
 					@click="mode = 0"
 				>
@@ -131,7 +131,7 @@
 				</button>
 				<button
 					v-if="existing != total"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
 					:class="[mode === 1 ? 'tw-core-button--primary' : 'tw-core-button--text']"
 					@click="mode = 1"
 				>
@@ -147,7 +147,7 @@
 				</button>
 				<button
 					v-if="added"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
 					:class="[mode === 2 ? 'tw-core-button--primary' : 'tw-core-button--text']"
 					@click="mode = 2"
 				>
@@ -163,7 +163,7 @@
 				</button>
 				<button
 					v-if="changed"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
 					:class="[mode === 3 ? 'tw-core-button--primary' : 'tw-core-button--text']"
 					@click="mode = 3"
 				>
@@ -179,7 +179,7 @@
 				</button>
 				<button
 					v-if="pending"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
 					:class="[mode === 4 ? 'tw-core-button--primary' : 'tw-core-button--text']"
 					@click="mode = 4"
 				>
@@ -195,7 +195,7 @@
 				</button>
 				<button
 					v-if="invalid"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
 					:class="[mode === 5 ? 'tw-core-button--primary' : 'tw-core-button--text']"
 					@click="mode = 5"
 				>
diff --git a/src/settings/components/if.vue b/src/settings/components/if.vue
index 59bd89cd..11b33fd2 100644
--- a/src/settings/components/if.vue
+++ b/src/settings/components/if.vue
@@ -16,7 +16,7 @@
 
 		<div class="tw-border-t tw-mg-t-05 tw-pd-t-05">
 			<header class="tw-flex tw-align-items-center">
-				<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip-wrapper">
+				<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip__container">
 					<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 						<span v-if="passes">
@@ -43,7 +43,7 @@
 
 		<div class="tw-border-t tw-mg-t-05 tw-pd-t-05">
 			<header class="tw-flex tw-align-items-center">
-				<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip-wrapper">
+				<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip__container">
 					<figure :class="[passes ? 'ffz-i-cancel' : 'ffz-i-ok']" />
 					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 						<span v-if="passes">
diff --git a/src/settings/components/title.vue b/src/settings/components/title.vue
index 5412779d..715d6fd9 100644
--- a/src/settings/components/title.vue
+++ b/src/settings/components/title.vue
@@ -5,13 +5,13 @@
 				{{ t(type.i18n, type.title) }}
 			</div>
 
-			<div v-if="! is_valid" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
+			<div v-if="! is_valid" class="tw-relative tw-tooltip__container tw-mg-r-05">
 				<figure class="tw-c-text-error ffz-i-attention" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 					{{ t('settings.filter.title.warn-invalid', 'This pattern is invalid.') }}
 				</div>
 			</div>
-			<div v-else-if="! is_safe" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
+			<div v-else-if="! is_safe" class="tw-relative tw-tooltip__container tw-mg-r-05">
 				<figure class="tw-c-text-error ffz-i-attention" />
 				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
 					{{ t('settings.filter.title.warn-complex', 'This pattern is potentially too complex. It will be disabled to avoid client lag or freezing.') }}
@@ -50,7 +50,7 @@
 					type="checkbox"
 					class="ffz-min-width-unset tw-checkbox__input"
 				>
-				<label :for="'sensitive$' + id" class="tw-checkbox__label tw-relative tw-tooltip-wrapper">
+				<label :for="'sensitive$' + id" class="tw-checkbox__label tw-relative tw-tooltip__container">
 					<span class="tw-mg-l-05">
 						Aa
 						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
diff --git a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
index 8a425cf1..ec0a2634 100644
--- a/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
+++ b/src/sites/twitch-twilight/modules/chat/emote_menu.jsx
@@ -2089,150 +2089,155 @@ export default class EmoteMenu extends Module {
 
 				const visibility = this.state.visibility_control;
 
-				return (<div
-					class={`tw-balloon tw-balloon--md tw-balloon--up tw-balloon--right tw-block tw-absolute ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
-					data-a-target="emote-picker"
-				>
-					<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base">
+				return (<div class="tw-block">
+					<div class="tw-absolute tw-attached tw-attached--right tw-attached--up">
 						<div
-							class="emote-picker__tab-content scrollable-area"
-							data-test-selector="scrollable-area-wrapper"
-							data-simplebar
+							class={`tw-balloon tw-balloon--auto tw-inline-block tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-2 ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
+							data-a-target="emote-picker"
+							role="dialog"
 						>
-							<div ref={this.saveScrollRef} class="simplebar-scroll-content">
-								<div class="simplebar-content">
-									{loading && this.renderLoading()}
-									{!loading && sets && sets.map(data => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
-										data.emoji ? t.EmojiSection : t.MenuSection,
-										{
-											key: data.key,
-											data,
-											filtered: this.state.filtered,
-											visibility_control: visibility,
-											onClickToken: this.props.onClickToken,
-											addSection: this.addSection,
-											removeSection: this.removeSection,
-											startObserving: this.startObserving,
-											stopObserving: this.stopObserving
-										}
-									))}
-									{! loading && (! sets || ! sets.length) && this.renderEmpty()}
+							<div class="emote-picker">
+								<div
+									class="emote-picker__tab-content scrollable-area"
+									data-test-selector="scrollable-area-wrapper"
+									data-simplebar
+								>
+									<div ref={this.saveScrollRef} class="simplebar-scroll-content">
+										<div class="simplebar-content">
+											{loading && this.renderLoading()}
+											{!loading && sets && sets.map(data => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
+												data.emoji ? t.EmojiSection : t.MenuSection,
+												{
+													key: data.key,
+													data,
+													filtered: this.state.filtered,
+													visibility_control: visibility,
+													onClickToken: this.props.onClickToken,
+													addSection: this.addSection,
+													removeSection: this.removeSection,
+													startObserving: this.startObserving,
+													stopObserving: this.stopObserving
+												}
+											))}
+											{! loading && (! sets || ! sets.length) && this.renderEmpty()}
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
-						<div class="emote-picker__controls-container tw-relative">
-							{(is_emoji || t.chat.context.get('chat.emote-menu.show-search')) && (<div class="tw-border-t tw-pd-1">
-								<div class="tw-flex">
-									<input
-										type="text"
-										class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
-										placeholder={
-											is_emoji ?
-												t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') :
-												t.i18n.t('emote-menu.search', 'Search for Emotes')
-										}
-										value={this.state.filter}
-										autoFocus
-										autoCapitalize="off"
-										autoCorrect="off"
-										onChange={this.handleFilterChange}
-										onKeyDown={this.handleKeyDown}
-									/>
-									{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip-wrapper tw-mg-l-1">
-										<button
-											class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon--primary tw-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' tw-core-button--primary' : ' tw-button-icon'}`}
-											onClick={this.toggleVisibilityControl}
-										>
-											<span class="tw-button-icon__icon tw-mg-x-05">
-												<figure class={this.state.visibility_control ? 'ffz-i-eye-off' : 'ffz-i-eye'} />
-											</span>
-										</button>
-										<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
-											{this.state.visibility_control ?
-												t.i18n.t('emote-menu.toggle-hide.on', 'Exit Emote Visibility Control') :
-												t.i18n.t('emote-menu.toggle-hide.off', 'Emote Visibility Control')
-											}
-											<div class="tw-mg-t-1 ffz--tooltip-explain">
-												{t.i18n.t('emote-menu.toggle-hide.info', 'Emote Visibility Control allows you to hide emotes from your emote menu, either individually or by set. With Emote Visibility Control enabled, just click an emote to hide or unhide it. Please note that you will still see the emotes in chat if someone uses them, but they won\'t appear in your emote menu.')}
-											</div>
+								<div class="emote-picker__controls-container tw-relative">
+									{(is_emoji || t.chat.context.get('chat.emote-menu.show-search')) && (<div class="tw-border-t tw-pd-1">
+										<div class="tw-flex">
+											<input
+												type="text"
+												class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
+												placeholder={
+													is_emoji ?
+														t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') :
+														t.i18n.t('emote-menu.search', 'Search for Emotes')
+												}
+												value={this.state.filter}
+												autoFocus
+												autoCapitalize="off"
+												autoCorrect="off"
+												onChange={this.handleFilterChange}
+												onKeyDown={this.handleKeyDown}
+											/>
+											{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
+												<button
+													class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon--primary tw-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' tw-core-button--primary' : ' tw-button-icon'}`}
+													onClick={this.toggleVisibilityControl}
+												>
+													<span class="tw-button-icon__icon tw-mg-x-05">
+														<figure class={this.state.visibility_control ? 'ffz-i-eye-off' : 'ffz-i-eye'} />
+													</span>
+												</button>
+												<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
+													{this.state.visibility_control ?
+														t.i18n.t('emote-menu.toggle-hide.on', 'Exit Emote Visibility Control') :
+														t.i18n.t('emote-menu.toggle-hide.off', 'Emote Visibility Control')
+													}
+													<div class="tw-mg-t-1 ffz--tooltip-explain">
+														{t.i18n.t('emote-menu.toggle-hide.info', 'Emote Visibility Control allows you to hide emotes from your emote menu, either individually or by set. With Emote Visibility Control enabled, just click an emote to hide or unhide it. Please note that you will still see the emotes in chat if someone uses them, but they won\'t appear in your emote menu.')}
+													</div>
+												</div>
+											</div>}
+											{(no_tabs || is_emoji) && ! visibility && this.state.has_emoji_tab && <t.EmojiTonePicker
+												tone={this.state.tone}
+												choices={this.state.tone_emoji}
+												pickTone={this.pickTone}
+											/>}
 										</div>
-									</div>}
-									{(no_tabs || is_emoji) && ! visibility && this.state.has_emoji_tab && <t.EmojiTonePicker
-										tone={this.state.tone}
-										choices={this.state.tone_emoji}
-										pickTone={this.pickTone}
-									/>}
-								</div>
-							</div>)}
-							<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
-								{! visibility && <div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
-									<button
-										class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'fav' ? ' tw-interactable--selected' : ''}`}
-										id="emote-picker__fav"
-										data-tab="fav"
-										data-tooltip-type="html"
-										data-title={t.i18n.t('emote-menu.favorites', 'Favorites')}
-										onClick={this.clickTab}
-									>
-										<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
-											<figure class="ffz-i-star" />
+									</div>)}
+									<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
+										{! visibility && <div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
+											<button
+												class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'fav' ? ' tw-interactable--selected' : ''}`}
+												id="emote-picker__fav"
+												data-tab="fav"
+												data-tooltip-type="html"
+												data-title={t.i18n.t('emote-menu.favorites', 'Favorites')}
+												onClick={this.clickTab}
+											>
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+													<figure class="ffz-i-star" />
+												</div>
+											</button>
+										</div>}
+										{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
+											<button
+												class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`}
+												id="emote-picker__channel"
+												data-tab="channel"
+												data-tooltip-type="html"
+												data-title={t.i18n.t('emote-menu.channel', 'Channel')}
+												onClick={this.clickTab}
+											>
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+													<figure class="ffz-i-camera" />
+												</div>
+											</button>
+										</div>}
+										<div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
+											<button
+												class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'all' ? ' tw-interactable--selected' : ''}`}
+												id="emote-picker__all"
+												data-tab="all"
+												data-tooltip-type="html"
+												data-title={t.i18n.t('emote-menu.my-emotes', 'My Emotes')}
+												onClick={this.clickTab}
+											>
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+													<figure class="ffz-i-channels" />
+												</div>
+											</button>
 										</div>
-									</button>
-								</div>}
-								{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
-									<button
-										class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`}
-										id="emote-picker__channel"
-										data-tab="channel"
-										data-tooltip-type="html"
-										data-title={t.i18n.t('emote-menu.channel', 'Channel')}
-										onClick={this.clickTab}
-									>
-										<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
-											<figure class="ffz-i-camera" />
+										{! visibility && this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
+											<button
+												class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'emoji' ? ' tw-interactable--selected' : ''}`}
+												id="emote-picker__emoji"
+												data-tab="emoji"
+												data-tooltip-type="html"
+												data-title={t.i18n.t('emote-menu.emoji', 'Emoji')}
+												onClick={this.clickTab}
+											>
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+													<figure class="ffz-i-smile" />
+												</div>
+											</button>
+										</div>}
+										<div class="tw-flex-grow-1" />
+										<div class="emote-picker-tab-item tw-relative">
+											<button
+												class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive"
+												data-tooltip-type="html"
+												data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
+												onClick={this.clickSettings}
+											>
+												<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
+													<figure class="ffz-i-cog" />
+												</div>
+											</button>
 										</div>
-									</button>
-								</div>}
-								<div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
-									<button
-										class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'all' ? ' tw-interactable--selected' : ''}`}
-										id="emote-picker__all"
-										data-tab="all"
-										data-tooltip-type="html"
-										data-title={t.i18n.t('emote-menu.my-emotes', 'My Emotes')}
-										onClick={this.clickTab}
-									>
-										<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
-											<figure class="ffz-i-channels" />
-										</div>
-									</button>
-								</div>
-								{! visibility && this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
-									<button
-										class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'emoji' ? ' tw-interactable--selected' : ''}`}
-										id="emote-picker__emoji"
-										data-tab="emoji"
-										data-tooltip-type="html"
-										data-title={t.i18n.t('emote-menu.emoji', 'Emoji')}
-										onClick={this.clickTab}
-									>
-										<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
-											<figure class="ffz-i-smile" />
-										</div>
-									</button>
-								</div>}
-								<div class="tw-flex-grow-1" />
-								<div class="emote-picker-tab-item tw-relative">
-									<button
-										class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive"
-										data-tooltip-type="html"
-										data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
-										onClick={this.clickSettings}
-									>
-										<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
-											<figure class="ffz-i-cog" />
-										</div>
-									</button>
+									</div>
 								</div>
 							</div>
 						</div>
diff --git a/src/sites/twitch-twilight/modules/chat/input.jsx b/src/sites/twitch-twilight/modules/chat/input.jsx
index d56acd20..b60a5027 100644
--- a/src/sites/twitch-twilight/modules/chat/input.jsx
+++ b/src/sites/twitch-twilight/modules/chat/input.jsx
@@ -308,6 +308,13 @@ export default class Input extends Module {
 						i = Math.ceil((inst.chatInputRef.scrollHeight - t) / height),
 						a = Math.min(1 + i, 4);
 
+					window._style = style;
+					window._height = height;
+					window.t = t;
+					window.i = i;
+					window.a = a;
+					console.log('resize', height, t, i, a)
+
 					inst.setState({
 						numInputRows: a
 					});
diff --git a/src/sites/twitch-twilight/modules/chat/line.js b/src/sites/twitch-twilight/modules/chat/line.js
index d21f250b..4b669d50 100644
--- a/src/sites/twitch-twilight/modules/chat/line.js
+++ b/src/sites/twitch-twilight/modules/chat/line.js
@@ -313,7 +313,7 @@ export default class ChatLine extends Module {
 						className: 'chat-line__message--badges'
 					}, t.chat.badges.render(msg, e)),
 					e('span', {
-						className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip-wrapper' : ''}`,
+						className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip__container' : ''}`,
 						role: 'button',
 						style: { color },
 						onClick: this.ffz_user_click_handler,
@@ -503,7 +503,7 @@ other {# messages were deleted by a moderator.}
 						className: 'chat-line__message--badges'
 					}, t.chat.badges.render(msg, e)),
 					e('span', {
-						className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip-wrapper' : ''}`,
+						className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip__container' : ''}`,
 						role: 'button',
 						style: { color },
 						onClick: this.ffz_user_click_handler,
diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
index 1b8a7213..bdeca9ac 100644
--- a/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
+++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
@@ -14,7 +14,7 @@
 
 		pointer-events: none;
 
-		.tw-tooltip-wrapper, .tw-stat, .ffz-stat, button, a {
+		.tw-tooltip__container, .tw-stat, .ffz-stat, button, a {
 			pointer-events: all;
 		}
 	}
diff --git a/src/sites/twitch-twilight/modules/directory/index.jsx b/src/sites/twitch-twilight/modules/directory/index.jsx
index bb64fe9a..1c078383 100644
--- a/src/sites/twitch-twilight/modules/directory/index.jsx
+++ b/src/sites/twitch-twilight/modules/directory/index.jsx
@@ -413,7 +413,7 @@ export default class Directory extends SiteModule {
 			el.ffz_uptime_el = container.querySelector('.ffz-uptime-element');
 			if ( ! el.ffz_uptime_el )
 				container.appendChild(el.ffz_uptime_el = (<div class="ffz-uptime-element tw-absolute tw-right-0 tw-top-0 tw-mg-1">
-					<div class="tw-relative tw-tooltip-wrapper">
+					<div class="tw-relative tw-tooltip__container">
 						<div class="tw-border-radius-small tw-c-background-overlay tw-c-text-overlay tw-flex tw-pd-x-05">
 							<div class="tw-flex tw-c-text-live">
 								<figure class="ffz-i-clock" />
diff --git a/src/sites/twitch-twilight/modules/menu_button.jsx b/src/sites/twitch-twilight/modules/menu_button.jsx
index 2adbafeb..176784d3 100644
--- a/src/sites/twitch-twilight/modules/menu_button.jsx
+++ b/src/sites/twitch-twilight/modules/menu_button.jsx
@@ -295,7 +295,7 @@ export default class MenuButton extends SiteModule {
 		el = (<div
 			class={`ffz-top-nav ${is_mod ? 'ffz-mod-view-button tw-relative tw-mg-b-1' : `tw-align-self-center tw-flex-grow-0 tw-flex-nowrap tw-flex-shrink-0 tw-relative ${is_sunlight ? 'tw-mg-l-05 tw-mg-r-2' : 'tw-mg-x-05'}`}`}
 		>
-			<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
+			<div class="tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
 					class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.loading ? ' loading' : ''}`}
 					onClick={e => this.handleClick(e, btn)} // eslint-disable-line react/jsx-no-bind
@@ -314,7 +314,7 @@ export default class MenuButton extends SiteModule {
 								{ this.error.i18n ? this.i18n.t(this.error.i18n, this.error.text) : this.error.text }
 							</div>
 							<button
-								class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip-wrapper"
+								class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
 								onClick={() => this.error = null} // eslint-disable-line react/jsx-no-bind
 							>
 								<span class="tw-button-icon__icon">
@@ -468,58 +468,60 @@ export default class MenuButton extends SiteModule {
 		}
 
 
-		ctx = (<div class={`tw-absolute tw-balloon tw-balloon--lg ${is_mod ? 'tw-balloon--up tw-balloon--left' : 'tw-balloon--down tw-balloon--right'} tw-block ffz--menu-context`}>
-			<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4">
-				<div class="tw-c-text-base tw-elevation-1 tw-flex tw-flex-shrink-0 tw-pd-x-1 tw-pd-y-05 tw-popover-header">
-					<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--left">
-						<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
-							<button
-								class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
-								onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind
-							>
-								<span class="tw-button-icon__icon">
-									<figure class="ffz-i-t-reset" />
-								</span>
-							</button>
-							<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
-								{ this.i18n.t('player.reset_button.all', 'Reset All Players (Double-Click)') }
+		ctx = (<div class={`tw-absolute tw-attached ${is_mod ? 'tw-attached--up tw-attached--left' : 'tw-attached--down tw-attached--right'}`}>
+			<div class={`tw-balloon tw-balloon--lg tw-block ffz--menu-context`}>
+				<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4">
+					<div class="tw-c-text-base tw-elevation-1 tw-flex tw-flex-shrink-0 tw-pd-x-1 tw-pd-y-05 tw-popover-header">
+						<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--left">
+							<div class="tw-inline-flex tw-relative tw-tooltip__container">
+								<button
+									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
+									onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind
+								>
+									<span class="tw-button-icon__icon">
+										<figure class="ffz-i-t-reset" />
+									</span>
+								</button>
+								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+									{ this.i18n.t('player.reset_button.all', 'Reset All Players (Double-Click)') }
+								</div>
 							</div>
 						</div>
-					</div>
-					<div class="tw-align-items-center tw-flex tw-flex-column tw-flex-grow-1 tw-justify-content-center">
-						<h5 class="tw-align-center tw-c-text-alt tw-semibold">
-							{ this.i18n.t('site.menu_button.profiles', 'Profiles') }
-						</h5>
-					</div>
-					<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
-						<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
-							<button
-								class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
-								onClick={e => {this.openSettings(e, btn); destroy()}} // eslint-disable-line react/jsx-no-bind
-							>
-								<span class="tw-button-icon__icon">
-									<figure class="ffz-i-cog" />
-								</span>
-							</button>
-							<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
-								{ this.i18n.t('setting.profiles.configure', 'Configure') }
+						<div class="tw-align-items-center tw-flex tw-flex-column tw-flex-grow-1 tw-justify-content-center">
+							<h5 class="tw-align-center tw-c-text-alt tw-semibold">
+								{ this.i18n.t('site.menu_button.profiles', 'Profiles') }
+							</h5>
+						</div>
+						<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
+							<div class="tw-inline-flex tw-relative tw-tooltip__container">
+								<button
+									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
+									onClick={e => {this.openSettings(e, btn); destroy()}} // eslint-disable-line react/jsx-no-bind
+								>
+									<span class="tw-button-icon__icon">
+										<figure class="ffz-i-cog" />
+									</span>
+								</button>
+								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
+									{ this.i18n.t('setting.profiles.configure', 'Configure') }
+								</div>
 							</div>
 						</div>
+						<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
+							<button
+								class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
+								onClick={destroy} // eslint-disable-line react/jsx-no-bind
+							>
+								<span class="tw-button-icon__icon">
+									<figure class="ffz-i-cancel" />
+								</span>
+							</button>
+						</div>
 					</div>
-					<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
-						<button
-							class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
-							onClick={destroy} // eslint-disable-line react/jsx-no-bind
-						>
-							<span class="tw-button-icon__icon">
-								<figure class="ffz-i-cancel" />
-							</span>
-						</button>
+					<div class="center-window__long-scrollable-area scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
+						{profiles}
 					</div>
 				</div>
-				<div class="center-window__long-scrollable-area scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
-					{profiles}
-				</div>
 			</div>
 		</div>);
 
diff --git a/src/sites/twitch-twilight/modules/player.jsx b/src/sites/twitch-twilight/modules/player.jsx
index bd74f88c..c2f86af7 100644
--- a/src/sites/twitch-twilight/modules/player.jsx
+++ b/src/sites/twitch-twilight/modules/player.jsx
@@ -1066,7 +1066,7 @@ export default class Player extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip-wrapper">
+			cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
 					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
@@ -1260,7 +1260,7 @@ export default class Player extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip-wrapper">
+			cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
 					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
@@ -1363,7 +1363,7 @@ export default class Player extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip-wrapper">
+			cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip__container">
 				{btn = (<button
 					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
@@ -1431,7 +1431,7 @@ export default class Player extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-tooltip-wrapper tw-mg-1">
+			cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-tooltip__container tw-mg-1">
 				{btn = (<button
 					class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
diff --git a/src/sites/twitch-twilight/modules/video_chat/index.jsx b/src/sites/twitch-twilight/modules/video_chat/index.jsx
index 798d0c34..17e65012 100644
--- a/src/sites/twitch-twilight/modules/video_chat/index.jsx
+++ b/src/sites/twitch-twilight/modules/video_chat/index.jsx
@@ -264,7 +264,7 @@ export default class VideoChatHook extends Module {
 					<button class="tw-button tw-button--text" data-test-selector="parent-reply-button" onClick={msg._reply_handler}>
 						<span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span>
 					</button>
-					<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative tw-tooltip-wrapper">
+					<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative tw-tooltip__container">
 						• { t.i18n.t('video-chat.time', '{time,humantime} ago', {
 							time: msg.timestamp
 						}) }
@@ -301,7 +301,7 @@ export default class VideoChatHook extends Module {
 					>
 						{hide_timestamps || (<div data-test-selector="message-timestamp" class="tw-align-right tw-flex tw-flex-shrink-0 vod-message__header">
 							<div class="tw-mg-r-05">
-								<div class="tw-inline-flex tw-relative tw-tooltip-wrapper">
+								<div class="tw-inline-flex tw-relative tw-tooltip__container">
 									<button class="tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive" onClick={this.onTimestampClickHandler}>
 										<div class="tw-pd-x-05">
 											<p class="tw-font-size-7">{print_duration(context.comment.contentOffset)}</p>
diff --git a/src/sites/twitch-twilight/styles/channel.scss b/src/sites/twitch-twilight/styles/channel.scss
index b8b298b9..eb06f262 100644
--- a/src/sites/twitch-twilight/styles/channel.scss
+++ b/src/sites/twitch-twilight/styles/channel.scss
@@ -24,7 +24,7 @@
 			order: 1;
 		}
 
-		.tw-tooltip-wrapper {
+		.tw-tooltip__container {
 			order: 100;
 		}
 	}
diff --git a/src/std-components/icon-picker.vue b/src/std-components/icon-picker.vue
index 62f982c1..a2372ea7 100644
--- a/src/std-components/icon-picker.vue
+++ b/src/std-components/icon-picker.vue
@@ -25,7 +25,7 @@
 				>
 				<button
 					v-if="clearable"
-					class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text tw-tooltip-wrapper"
+					class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text tw-tooltip__container"
 					@click="change('', false)"
 					@keydown.escape="open = false"
 					@focus="onFocus(false)"
diff --git a/src/std-components/tooltip.vue b/src/std-components/tooltip.vue
index c2d5756c..f9603cb5 100644
--- a/src/std-components/tooltip.vue
+++ b/src/std-components/tooltip.vue
@@ -1,5 +1,5 @@
 <template functional>
-	<div class="tw-relative tw-tooltip-wrapper">
+	<div class="tw-relative tw-tooltip__container">
 		<slot />
 		<div
 			:class="`tw-tooltip--align-${props.align||'center'} tw-tooltip--${props.above ? 'up' : 'down'}`"