4.22.6

First round of fixes, more to follow.

* Fixed: Appearance of tool-tip and balloon page elements.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.22.5",
+  "version": "4.22.6",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "private": true,
   "license": "Apache-2.0",

src/modules/chat/override-editor.vue

@@ -26,12 +26,12 @@
 			>
 
 			<button
-				class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container"
 				:class="{'tw-button--disabled': name == null}"
 				@click="clearName"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
 				</div>
 			</button>
@@ -52,12 +52,12 @@
 			/>
 
 			<button
-				class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container"
 				:class="{'tw-button--disabled': color == null}"
 				@click="clearColor"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
 				</div>
 			</button>

src/modules/main_menu/components/addon.vue

@@ -72,7 +72,7 @@
 					<button
 						v-if="external"
 						disabled
-						class="tw-button ffz-button--hollow tw-button--disabled tw-tooltip__container tw-mg-r-1"
+						class="tw-button ffz-button--hollow tw-button--disabled ffz-il-tooltip__container tw-mg-r-1"
 					>
 						<span class="tw-button__icon tw-button__icon--left">
 							<figure class="ffz-i-trash" />
@@ -80,7 +80,7 @@
 						<span class="tw-button__text">
 							{{ t('addon.disable', 'Disable') }}
 						</span>
-						<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-left">
+						<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-left">
 							{{ t('addon.external.description', 'This add-on has been loaded by an external script and cannot be disabled here.') }}
 						</div>
 					</button>

src/modules/main_menu/components/badge-term-editor.vue

@@ -51,11 +51,11 @@
 					:show-input="false"
 					:tooltip="t('settings.term.color.tip', 'Color')"
 				/>
-				<div v-else-if="term.c" class="ffz-color-preview tw-relative tw-tooltip__container">
+				<div v-else-if="term.c" class="ffz-color-preview tw-relative ffz-il-tooltip__container">
 					<figure :style="`background-color: ${term.c}`">
 						&nbsp;
 					</figure>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('settings.term.color.tip', 'Color') }}
 					</div>
 				</div>
@@ -63,7 +63,7 @@
 			<div
 				v-if="priority"
 				:class="editing ? 'tw-mg-r-05' : 'tw-mg-x-05'"
-				class="tw-flex-shrink-0 tw-relative tw-tooltip__container"
+				class="tw-flex-shrink-0 tw-relative ffz-il-tooltip__container"
 			>
 				<span v-if="! editing">{{ term.p }}</span>
 				<input
@@ -74,13 +74,13 @@
 					class="tw-block tw-border-radius-medium tw-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
 					style="width: 5rem"
 				>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('settings.terms.priority.tip', 'Priority') }}
 				</div>
 			</div>
 			<div
 				v-if="removable && (editing || display.remove)"
-				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
+				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
 			>
 				<input
 					v-if="editing"
@@ -101,11 +101,11 @@
 					v-else-if="term.remove"
 					class="ffz-i-trash tw-pd-x-1"
 				/>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.terms.remove.on', 'Remove matching messages from chat.') }}
 				</div>
 			</div>
-			<!--div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip__container">
+			<!--div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative ffz-il-tooltip__container">
 				<button
 					v-if="editing"
 					:class="{active: edit_data.remove}"
@@ -121,7 +121,7 @@
 					v-else-if="term.remove"
 					class="ffz-i-eye-off tw-pd-x-1"
 				/>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					<span v-if="display.remove">
 						{{ t('setting.terms.remove.on', 'Remove matching messages from chat.') }}
 					</span>
@@ -144,47 +144,47 @@
 			</div>
 			<div v-else-if="editing" class="tw-flex-shrink-0">
 				<button
-					class="tw-button tw-button--text tw-tooltip__container"
+					class="tw-button tw-button--text ffz-il-tooltip__container"
 					:class="! valid && 'tw-button--disabled'"
 					:disabled="! valid"
 					@click="save"
 				>
 					<span class="tw-button__text ffz-i-floppy" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.save', 'Save') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="cancel">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
+				<button class="tw-button tw-button--text ffz-il-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">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="edit">
 					<span class="tw-button__text ffz-i-cog" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.edit', 'Edit') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>

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__container"
+				class="tw-mg-l-05 tw-button ffz-button--hollow ffz-il-tooltip__container"
 				@click="clear"
 			>
 				<span class="tw-button__icon tw-button__icon--left">
@@ -93,11 +93,11 @@
 									/>
 								</section>
 								<button
-									class="tw-mg-t-05 tw-button ffz-button--hollow tw-tooltip__container"
+									class="tw-mg-t-05 tw-button ffz-button--hollow ffz-il-tooltip__container"
 									@click="reset(i.id)"
 								>
 									<span class="tw-button__text">Reset</span>
-									<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+									<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 										{{ t('setting.reset', 'Reset to Default') }}
 									</span>
 								</button>

src/modules/main_menu/components/blocked-type-editor.vue

@@ -35,23 +35,23 @@
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
+				<button class="tw-button tw-button--text ffz-il-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">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>

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="ffz-checkbox tw-relative tw-tooltip__container">
+			<div class="ffz-checkbox tw-relative ffz-il-tooltip__container">
 				<input
 					id="nonversioned"
 					ref="nonversioned"
@@ -26,7 +26,7 @@
 					</span>
 				</label>
 
-				<div class="tw-tooltip ffz-balloon--md tw-tooltip--wrap tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-balloon--md ffz-il-tooltip--wrap ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('home.changelog.about-nonversioned', 'Non-versioned commits are commits to the FrankerFaceZ repository not associated with a release build. They typically represent maintenance or contributions from the community that will be included in a subsequent release.') }}
 				</div>
 			</div>

src/modules/main_menu/components/chat-actions.vue

@@ -301,31 +301,31 @@
 			</div>
 			<button
 				v-if="! maybe_clear && val.length"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
 				@click="maybe_clear = true"
 			>
 				<span class="tw-button__text ffz-i-trash">
 					{{ t('setting.delete-all', 'Delete All') }}
 				</span>
-				<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.actions.delete-all', "Delete all of this profile's actions.") }}
 				</span>
 			</button>
 			<button
 				v-if="maybe_clear"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
 				@click="doClear"
 			>
 				<span class="tw-button__text ffz-i-trash">
 					{{ t('setting.delete-all', 'Delete All') }}
 				</span>
-				<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.actions.delete-all', "Delete all of this profile's actions.") }}
 				</span>
 			</button>
 			<button
 				v-if="maybe_clear"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
 				@click="maybe_clear = false"
 			>
 				<span class="tw-button__text ffz-i-cancel">
@@ -334,13 +334,13 @@
 			</button>
 			<button
 				v-if="! val.length && has_default"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
 				@click="populate"
 			>
 				<span class="tw-button__text ffz-i-trash">
 					{{ t('setting.actions.add-default', 'Add Defaults') }}
 				</span>
-				<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.actions.add-default-tip', 'Add all of the default actions to this profile.') }}
 				</span>
 			</button>

src/modules/main_menu/components/chat-reasons.vue

@@ -6,25 +6,25 @@
 			</div>
 			<button
 				v-if="! empty"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
 				@click="clear"
 			>
 				<span class="tw-button__text ffz-i-trash">
 					{{ t('setting.delete-all', 'Delete All') }}
 				</span>
-				<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reasons.delete-all', "Delete all of this profile's reasons.") }}
 				</span>
 			</button>
 			<button
 				v-if="empty"
-				class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
+				class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
 				@click="populate"
 			>
 				<span class="tw-button__text ffz-i-trash">
 					{{ t('setting.reasons.add-default', 'Add Defaults') }}
 				</span>
-				<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reasons.add-default-tip', 'Add all of the default reasons to this profile.') }}
 				</span>
 			</button>

src/modules/main_menu/components/experiments.vue

@@ -105,11 +105,11 @@
 							<button
 								:disabled="exp.default"
 								:class="{'tw-button--disabled': exp.default}"
-								class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
+								class="tw-mg-t-05 tw-button tw-button--text ffz-il-tooltip__container"
 								@click="reset(key)"
 							>
 								<span class="tw-button__text ffz-i-cancel" />
-								<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+								<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 									{{ t('setting.reset', 'Reset to Default') }}
 								</span>
 							</button>
@@ -147,13 +147,13 @@
 						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__container">
+							<div v-if="exp.in_use" class="ffz--profile__icon ffz-i-ok ffz-il-tooltip__container">
-								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+								<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-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__container">
+							<div v-else class="ffz--profile__icon ffz-i-cancel ffz-il-tooltip__container">
-								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+								<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
 									{{ t('setting.experiments.inactive', 'This experiment is not active.') }}
 								</div>
 							</div>
@@ -190,11 +190,11 @@
 							<button
 								:disabled="exp.default"
 								:class="{'tw-button--disabled': exp.default}"
-								class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
+								class="tw-mg-t-05 tw-button tw-button--text ffz-il-tooltip__container"
 								@click="resetTwitch(key)"
 							>
 								<span class="tw-button__text ffz-i-cancel" />
-								<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+								<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 									{{ t('setting.reset', 'Reset to Default') }}
 								</span>
 							</button>

src/modules/main_menu/components/filter-rule-editor.vue

@@ -14,10 +14,10 @@
 
 		<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__container"
+			class="tw-mg-l-1 tw-pd-x-1 tw-border-l tw-flex tw-align-items-center ffz--profile__icon tw-relative ffz-il-tooltip__container"
 		>
 			<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
-			<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
+			<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-right">
 				<span v-if="passes">
 					{{ t('setting.filters.active', 'This rule matches.') }}
 				</span>
@@ -31,9 +31,9 @@
 			: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__container">
+			<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 ffz-il-tooltip__container">
 				<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
-				<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-right">
 					<span v-if="passes">
 						{{ t('setting.filters.active', 'This rule matches.') }}
 					</span>
@@ -44,23 +44,23 @@
 			</div>
 
 			<template v-if="deleting">
-				<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="$emit('delete')">
+				<button class="tw-button tw-button--text tw-relative ffz-il-tooltip__container" @click="$emit('delete')">
 					<span class="tw-button__text ffz-i-trash" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = false">
+				<button class="tw-button tw-button--text tw-relative ffz-il-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</template>
 			<template v-else>
-				<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = true">
+				<button class="tw-button tw-button--text tw-relative ffz-il-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>

src/modules/main_menu/components/game-list-editor.vue

@@ -65,9 +65,9 @@
 					</span>
 				</div>
 				<div class="tw-flex-shrink-0">
-					<button class="tw-button tw-button--text tw-tooltip__container" @click="remove(i)">
+					<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="remove(i)">
 						<span class="tw-button__text ffz-i-trash" />
-						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 							{{ t('setting.delete', 'Delete') }}
 						</div>
 					</button>

src/modules/main_menu/components/link-tester.vue

@@ -40,13 +40,13 @@
 				</div>
 
 				<button
-					class="tw-mg-05 tw-button tw-button--text tw-tooltip__container"
+					class="tw-mg-05 tw-button tw-button--text ffz-il-tooltip__container"
 					:class="examples_loading && 'tw-button--disabled'"
 					:disabled="examples_loading"
 					@click="updateExamples"
 				>
 					<span class="tw-button__text ffz-i-arrows-cw" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('debug.link-provider.refresh', 'Refresh') }}
 					</div>
 				</button>

src/modules/main_menu/components/main-menu.vue

@@ -33,11 +33,11 @@
 					<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__container" @click="popout">
+			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="popout">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-link-ext" />
 				</span>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
 					{{ t('main-menu.popout', 'Open Settings in a New Window') }}
 				</div>
 			</button>

src/modules/main_menu/components/profile-editor.vue

@@ -42,11 +42,11 @@
 				</div>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip__container"
+				class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
 				@click="resetExport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.close', 'Close') }}
 				</div>
 			</button>
@@ -57,11 +57,11 @@
 				{{ export_message }}
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip__container"
+				class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
 				@click="resetExport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.close', 'Close') }}
 				</div>
 			</button>

src/modules/main_menu/components/profile-manager.vue

@@ -11,7 +11,7 @@
 				}}
 
 				<div v-if="context.can_proxy" class="tw-flex tw-align-items-center tw-mg-t-1">
-					<div class="ffz-checkbox tw-relative tw-tooltip__container">
+					<div class="ffz-checkbox tw-relative ffz-il-tooltip__container">
 						<input
 							id="proxied"
 							ref="proxied"
@@ -27,7 +27,7 @@
 							</span>
 						</label>
 
-						<div class="tw-tooltip ffz-balloon--md tw-tooltip--wrap tw-tooltip--down tw-tooltip--align-left">
+						<div class="ffz-il-tooltip ffz-balloon--md ffz-il-tooltip--wrap ffz-il-tooltip--down ffz-il-tooltip--align-left">
 							{{ t('setting.context-difference.tip', 'Checking this will use the context from the original window, causing profiles and thier rules to match like they would in the window that opened this Control Center.') }}
 						</div>
 					</div>
@@ -128,11 +128,11 @@
 				</div>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip__container"
+				class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.close', 'Close') }}
 				</div>
 			</button>
@@ -144,11 +144,11 @@
 			</section>
 			<button
 				v-if="import_closable"
-				class="tw-button tw-button--text tw-relative tw-tooltip__container"
+				class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.close', 'Close') }}
 				</div>
 			</button>
@@ -163,23 +163,23 @@
 				<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__container"
+					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 ffz-il-tooltip__container"
 					@click="importProfile(profile)"
 				>
 					<span class="tw-button__text tw-c-text-overlay">
 						{{ profile.i18n_key ? t(profile.i18n_key, profile.name) : profile.name }}
 					</span>
-					<div v-if="profile.description" class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+					<div v-if="profile.description" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
 						{{ profile.desc_i18n_key ? t(profile.desc_i18n_key, profile.description) : profile.description }}
 					</div>
 				</button>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip__container"
+				class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.close', 'Close') }}
 				</div>
 			</button>
@@ -210,11 +210,11 @@
 				</button>
 			</section>
 			<button
-				class="tw-button tw-button--text tw-relative tw-tooltip__container"
+				class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
 				@click="resetImport"
 			>
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.close', 'Close') }}
 				</div>
 			</button>
@@ -237,10 +237,10 @@
 
 					<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"
+						class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container tw-font-size-4"
 					>
 						<span :class="`ffz-i-download-cloud${p.pause_updates ? ' ffz-unmatched-item' : ''}`" />
-						<div v-if="! p.pause_updates" class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+						<div v-if="! p.pause_updates" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
 							<div class="tw-mg-b-05">
 								{{ t('setting.profile.updates', 'This profile will update automatically from the following URL:') }}
 							</div>
@@ -271,9 +271,9 @@
 									'ffz-i-cancel': ! p.toggled,
 									'ffz-i-minus': p.toggled && ! p.live
 								}"
-								class="ffz--profile__icon tw-relative tw-tooltip__container"
+								class="ffz--profile__icon tw-relative ffz-il-tooltip__container"
 							>
-								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+								<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 									<span v-if="p.live">
 										{{ t('setting.profiles.active', 'This profile is enabled and active.') }}
 									</span>

src/modules/main_menu/components/profile-selector.vue

@@ -54,25 +54,25 @@
 								<div class="ffz--profile-row__icon-tray tw-flex">
 									<div
 										v-if="p.url"
-										:class="`tw-tooltip__container ffz--profile-row__icon ffz-i-download-cloud tw-relative${p.pause_updates ? ' ffz-unmatched-item' : ''}`"
+										:class="`ffz-il-tooltip__container ffz--profile-row__icon ffz-i-download-cloud tw-relative${p.pause_updates ? ' ffz-unmatched-item' : ''}`"
 									>
-										<div v-if="! p.pause_updates" class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+										<div v-if="! p.pause_updates" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 											{{ t('setting.profiles.updates', 'This profile will update automatically.') }}
 										</div>
 									</div>
 									<div
 										v-if="! p.toggled"
-										class="tw-tooltip__container ffz--profile-row__icon ffz-i-cancel tw-relative"
+										class="ffz-il-tooltip__container ffz--profile-row__icon ffz-i-cancel tw-relative"
 									>
-										<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+										<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 											{{ t('setting.profiles.disabled', 'This profile is disabled.') }}
 										</div>
 									</div>
 									<div
 										v-if="p.live"
-										class="tw-tooltip__container ffz--profile-row__icon ffz-i-ok tw-relative"
+										class="ffz-il-tooltip__container ffz--profile-row__icon ffz-i-ok tw-relative"
 									>
-										<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+										<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 											{{ t('setting.profiles.active', 'This profile is enabled and active.') }}
 										</div>
 									</div>

src/modules/main_menu/components/reason-editor.vue

@@ -23,43 +23,43 @@
 				</button>
 			</div>
 			<div v-else-if="editing" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="save">
 					<span class="tw-button__text ffz-i-floppy" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.save', 'Save') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="cancel">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', reason)">
+				<button class="tw-button tw-button--text ffz-il-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">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="edit">
 					<span class="tw-button__text ffz-i-cog" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.edit', 'Edit') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>

src/modules/main_menu/components/setting-check-box.vue

@@ -39,9 +39,9 @@
 			</button>
 
 			<div class="ffz--reset-button">
-				<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
+				<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.reset', 'Reset to Default') }}
 					</div>
 				</button>

src/modules/main_menu/components/setting-color-box.vue

@@ -38,9 +38,9 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
 				</div>
 			</button>

src/modules/main_menu/components/setting-combo-box.vue

@@ -54,9 +54,9 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-mg-y-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-mg-y-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
 				</div>
 			</button>

src/modules/main_menu/components/setting-hotkey.vue

@@ -35,9 +35,9 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
 				</div>
 			</button>

src/modules/main_menu/components/setting-select-box.vue

@@ -62,9 +62,9 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
 				</div>
 			</button>

src/modules/main_menu/components/setting-text-box.vue

@@ -38,9 +38,9 @@
 				</span>
 			</button>
 
-			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
+			<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
 				<span class="tw-button__text ffz-i-cancel" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.reset', 'Reset to Default') }}
 				</div>
 			</button>

src/modules/main_menu/components/term-editor.vue

@@ -1,15 +1,15 @@
 <template lang="html">
 	<div class="ffz--term">
 		<div class="tw-align-items-center tw-flex tw-flex-wrap tw-flex-row tw-full-width">
-			<div v-if="! is_valid" class="tw-relative tw-tooltip__container tw-mg-r-05">
+			<div v-if="! is_valid" class="tw-relative ffz-il-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">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-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__container tw-mg-r-05">
+			<div v-if="! is_safe" class="tw-relative ffz-il-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">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
 					{{ t('setting.terms.warn-complex', 'This highlight term is potentially too complex. It may cause client lag.') }}
 				</div>
 			</div>
@@ -56,11 +56,11 @@
 					:show-input="false"
 					:tooltip="t('settings.term.color.tip', 'Color')"
 				/>
-				<div v-else-if="term.c" class="ffz-color-preview tw-relative tw-tooltip__container">
+				<div v-else-if="term.c" class="ffz-color-preview tw-relative ffz-il-tooltip__container">
 					<figure :style="`background-color: ${term.c}`">
 						&nbsp;
 					</figure>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('settings.term.color.tip', 'Color') }}
 					</div>
 				</div>
@@ -68,7 +68,7 @@
 			<div
 				v-if="priority"
 				:class="editing ? 'tw-mg-r-05' : 'tw-mg-x-05'"
-				class="tw-flex-shrink-0 tw-relative tw-tooltip__container"
+				class="tw-flex-shrink-0 tw-relative ffz-il-tooltip__container"
 			>
 				<span v-if="! editing">{{ term.p }}</span>
 				<input
@@ -79,13 +79,13 @@
 					class="tw-block tw-border-radius-medium tw-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
 					style="width: 5rem"
 				>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('settings.terms.priority.tip', 'Priority') }}
 				</div>
 			</div>
 			<div
 				v-if="editing || display.s"
-				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
+				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
 			>
 				<input
 					v-if="editing"
@@ -103,18 +103,18 @@
 						{{ t('settings.terms.sensitive', 'Aa') }}
 					</span>
 				</label>
-				<div v-else-if="display.s" class="tw-relative tw-tooltip__container">
+				<div v-else-if="display.s" class="tw-relative ffz-il-tooltip__container">
 					<span class="tw-mg-l-05">
 						{{ t('settings.terms.sensitive', 'Aa') }}
 					</span>
 				</div>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('settings.terms.sensitive.tip', 'Case Sensitive') }}
 				</div>
 			</div>
 			<div
 				v-if="words && (editing || display.w)"
-				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
+				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
 			>
 				<input
 					v-if="editing"
@@ -132,18 +132,18 @@
 						{{ t('settings.terms.word', 'Abc') }}
 					</span>
 				</label>
-				<div v-else-if="display.w" class="tw-relative tw-tooltip__container">
+				<div v-else-if="display.w" class="tw-relative ffz-il-tooltip__container">
 					<span class="tw-mg-l-05 ffz--whole-word">
 						{{ t('settings.terms.word', 'Abc') }}
 					</span>
 				</div>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('settings.terms.word.tip', 'Match Whole Words') }}
 				</div>
 			</div>
 			<div
 				v-if="highlight && (editing || display.h)"
-				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
+				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
 			>
 				<input
 					v-if="editing"
@@ -161,12 +161,12 @@
 						{{ t('settings.terms.highlight', 'Hlt') }}
 					</span>
 				</label>
-				<div v-else-if="display.h" class="tw-relative tw-tooltip__container">
+				<div v-else-if="display.h" class="tw-relative ffz-il-tooltip__container">
 					<span class="tw-mg-l-05 ffz--highlight">
 						{{ t('settings.terms.highlight', 'Hlt') }}
 					</span>
 				</div>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					<markdown
 						:source="t(
 							'settings.terms.highlight.tip',
@@ -177,7 +177,7 @@
 			</div>
 			<div
 				v-if="removable && (editing || display.remove)"
-				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
+				class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
 			>
 				<input
 					v-if="editing"
@@ -198,7 +198,7 @@
 					v-else-if="term.remove"
 					class="ffz-i-trash tw-pd-x-1"
 				/>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.terms.remove.on', 'Remove matching messages from chat.') }}
 				</div>
 			</div>
@@ -210,43 +210,43 @@
 				</button>
 			</div>
 			<div v-else-if="editing" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="save">
 					<span class="tw-button__text ffz-i-floppy" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.save', 'Save') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="cancel">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</div>
 			<div v-else-if="deleting" class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
+				<button class="tw-button tw-button--text ffz-il-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">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
 					<span class="tw-button__text ffz-i-cancel" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.cancel', 'Cancel') }}
 					</div>
 				</button>
 			</div>
 			<div v-else class="tw-flex-shrink-0">
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="edit">
 					<span class="tw-button__text ffz-i-cog" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.edit', 'Edit') }}
 					</div>
 				</button>
-				<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
+				<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
 					<span class="tw-button__text ffz-i-trash" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('setting.delete', 'Delete') }}
 					</div>
 				</button>

src/modules/metadata.jsx

@@ -224,7 +224,7 @@ export default class Metadata extends Module {
 							value={url}
 							onFocus={e => e.target.select()}
 						/>
-						{can_copy && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
+						{can_copy && <div class="tw-relative ffz-il-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 ffz-core-button ffz-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') }
@@ -236,7 +236,7 @@ export default class Metadata extends Module {
 									</span>
 								</div>
 							</button>
-							<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up">
+							<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up">
 								{ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
 							</div>
 						</div>}
@@ -637,7 +637,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__container 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 ffz-il-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}
 						>
@@ -764,7 +764,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__container 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 ffz-il-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}

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__container"
+				class="tw-button-icon tw-mg-l-05 tw-relative ffz-il-tooltip__container"
 				@click="open = false"
 			>
 				<span class="tw-button-icon__icon">

src/modules/translation_ui/components/translation-ui.vue

@@ -26,27 +26,27 @@
 					</div>
 				</div>
 			</div>
-			<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="saveBlob">
+			<button class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="saveBlob">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-floppy" />
 				</span>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ 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__container" @click="uploadBlob">
+			<button v-if="can_upload" class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="uploadBlob">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-upload-cloud" />
 				</span>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('i18n.ui.upload', 'Upload Changes') }}
 				</div>
 			</button>
-			<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="requestKeys">
+			<button class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="requestKeys">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-arrows-cw" />
 				</span>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('i18n.ui.refresh', 'Refresh Strings') }}
 				</div>
 			</button>
@@ -55,11 +55,11 @@
 					<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__container" @click="popout">
+			<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="popout">
 				<span class="tw-button-icon__icon">
 					<figure class="ffz-i-link-ext" />
 				</span>
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
 					{{ t('i18n.ui.popout', 'Open the Translation Editor in a New Window') }}
 				</div>
 			</button>
@@ -76,11 +76,11 @@
 		</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 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
+				<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container" @click="prevPage">
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-left-dir" />
 					</span>
-					<div class="tw-tooltip tw-tooltip--down">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down">
 						{{ t('page.previous', 'Previous Page') }}
 					</div>
 				</button>
@@ -105,17 +105,17 @@
 					@keydown.enter="closePage"
 					@blur="closePage"
 				>
-				<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
+				<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container" @click="nextPage">
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-right-dir" />
 					</span>
-					<div class="tw-tooltip tw-tooltip--down">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down">
 						{{ t('page.next', 'Next Page') }}
 					</div>
 				</button>
 				<div class="tw-flex-grow-1" />
 				<button
-					class="tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					class="tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
 					:class="[mode === 0 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 0"
 				>
@@ -125,13 +125,13 @@
 							{{ total }}
 						</div>
 					</div>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('i18n.ui.all', 'All Strings') }}
 					</div>
 				</button>
 				<button
 					v-if="existing != total"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
 					:class="[mode === 1 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 1"
 				>
@@ -141,13 +141,13 @@
 							{{ existing }}
 						</div>
 					</div>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('i18n.ui.existing', 'Existing Strings') }}
 					</div>
 				</button>
 				<button
 					v-if="added"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
 					:class="[mode === 2 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 2"
 				>
@@ -157,13 +157,13 @@
 							{{ added }}
 						</div>
 					</div>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('i18n.ui.added', 'New Strings') }}
 					</div>
 				</button>
 				<button
 					v-if="changed"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
 					:class="[mode === 3 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 3"
 				>
@@ -173,13 +173,13 @@
 							{{ changed }}
 						</div>
 					</div>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('i18n.ui.changed', 'Changed Strings') }}
 					</div>
 				</button>
 				<button
 					v-if="pending"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
 					:class="[mode === 4 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 4"
 				>
@@ -189,13 +189,13 @@
 							{{ pending }}
 						</div>
 					</div>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('i18n.ui.pending', 'Pending Strings') }}
 					</div>
 				</button>
 				<button
 					v-if="invalid"
-					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
+					class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
 					:class="[mode === 5 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
 					@click="mode = 5"
 				>
@@ -205,7 +205,7 @@
 							{{ invalid }}
 						</div>
 					</div>
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 						{{ t('i18n.ui.invalid', 'Invalid Strings') }}
 					</div>
 				</button>

src/settings/components/if.vue

@@ -16,9 +16,9 @@
 
 		<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__container">
+				<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative ffz-il-tooltip__container">
 					<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
 						<span v-if="passes">
 							{{ t('setting.filters.if.pass', 'This branch is active because the condition is true.') }}
 						</span>
@@ -43,9 +43,9 @@
 
 		<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__container">
+				<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative ffz-il-tooltip__container">
 					<figure :class="[passes ? 'ffz-i-cancel' : 'ffz-i-ok']" />
-					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
 						<span v-if="passes">
 							{{ t('setting.filters.if.no_fail', 'This branch is not active because the condition is true.') }}
 						</span>

src/settings/components/title.vue

@@ -5,15 +5,15 @@
 				{{ t(type.i18n, type.title) }}
 			</div>
 
-			<div v-if="! is_valid" class="tw-relative tw-tooltip__container tw-mg-r-05">
+			<div v-if="! is_valid" class="tw-relative ffz-il-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">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-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__container tw-mg-r-05">
+			<div v-else-if="! is_safe" class="tw-relative ffz-il-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">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-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.') }}
 				</div>
 			</div>
@@ -50,10 +50,10 @@
 					type="checkbox"
 					class="ffz-min-width-unset ffz-checkbox__input"
 				>
-				<label :for="'sensitive$' + id" class="ffz-min-width-unset ffz-checkbox__label tw-relative tw-tooltip__container">
+				<label :for="'sensitive$' + id" class="ffz-min-width-unset ffz-checkbox__label tw-relative ffz-il-tooltip__container">
 					<span class="tw-mg-l-05">
 						Aa
-						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 							{{ t('settings.filter.title.sensitive', 'Case Sensitive') }}
 						</div>
 					</span>

src/sites/player/metadata.jsx

@@ -125,7 +125,7 @@ export default class Metadata extends Module {
 							value={url}
 							onFocus={e => e.target.select()}
 						/>
-						{can_copy && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
+						{can_copy && <div class="tw-relative ffz-il-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 ffz-core-button ffz-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') }
@@ -137,7 +137,7 @@ export default class Metadata extends Module {
 									</span>
 								</div>
 							</button>
-							<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up">
+							<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up">
 								{ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
 							</div>
 						</div>}
@@ -482,7 +482,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__container ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05'}`}
+							class={`tw-align-items-center tw-inline-flex tw-relative ffz-il-tooltip__container ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05'}`}
 							data-key={key}
 							tip_content={null}
 						>
@@ -609,7 +609,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__container 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 ffz-il-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}

src/sites/shared/player.jsx

@@ -1182,7 +1182,7 @@ export default class PlayerBase extends Module {
 				extra.textContent = `${Math.round(value * 100)}%`;
 			};
 
-			cont = (<div class="ffz--player-gain volume-slider__slider-container tw-relative tw-tooltip__container">
+			cont = (<div class="ffz--player-gain volume-slider__slider-container tw-relative ffz-il-tooltip__container">
 				<div class="tw-align-items-center tw-flex tw-full-height">
 					<label class="tw-hide-accessible">{this.i18n.t('player.gain.label','Gain Control')}</label>
 					<div class="tw-flex tw-full-width tw-relative tw-z-above">
@@ -1205,7 +1205,7 @@ export default class PlayerBase extends Module {
 						</div>
 					</div>
 				</div>
-				{tipcont = (<div class="tw-tooltip tw-tooltip--align-center tw-tooltip--up" role="tooltip">
+				{tipcont = (<div class="ffz-il-tooltip ffz-il-tooltip--align-center ffz-il-tooltip--up" role="tooltip">
 					<div>
 						{tip = (<div class="ffz--p-tip" />)}
 						{extra = (<div class="tw-regular ffz--p-value" />)}
@@ -1226,9 +1226,9 @@ export default class PlayerBase extends Module {
 		else {
 			input = cont.querySelector('input');
 			fill = cont.querySelector('.ffz--gain-value');
-			tipcont = cont.querySelector('.tw-tooltip');
+			tipcont = cont.querySelector('.ffz-il-tooltip');
-			tip = cont.querySelector('.tw-tooltip .ffz--p-tip');
+			tip = cont.querySelector('.ffz-il-tooltip .ffz--p-tip');
-			extra = cont.querySelector('.tw-tooltip .ffz--p-value');
+			extra = cont.querySelector('.ffz-il-tooltip .ffz--p-value');
 		}
 
 		let value = video._ffz_gain_value;
@@ -1272,7 +1272,7 @@ export default class PlayerBase extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip__container">
+			cont = (<div class="ffz--player-comp tw-inline-flex tw-relative ffz-il-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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
@@ -1285,7 +1285,7 @@ export default class PlayerBase extends Module {
 						</div>
 					</div>
 				</button>)}
-				<div class="tw-tooltip tw-tooltip--align-left tw-tooltip--up" role="tooltip">
+				<div class="ffz-il-tooltip ffz-il-tooltip--align-left ffz-il-tooltip--up" role="tooltip">
 					<div>
 						{tip = (<div class="ffz--p-tip" />)}
 						{extra = (<div class="ffz--p-extra tw-pd-t-05 ffz--tooltip-explain" />)}
@@ -1300,8 +1300,8 @@ export default class PlayerBase extends Module {
 		else {
 			icon = cont.querySelector('figure');
 			btn = cont.querySelector('button');
-			tip = cont.querySelector('.tw-tooltip .ffz--p-tip');
+			tip = cont.querySelector('.ffz-il-tooltip .ffz--p-tip');
-			extra = cont.querySelector('.tw-tooltip .ffz--p-extra');
+			extra = cont.querySelector('.ffz-il-tooltip .ffz--p-extra');
 		}
 
 		const comp_active = video._ffz_compressed,
@@ -1637,7 +1637,7 @@ export default class PlayerBase extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip__container">
+			cont = (<div class="ffz--player-pip tw-inline-flex tw-relative ffz-il-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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
@@ -1650,7 +1650,7 @@ export default class PlayerBase extends Module {
 						</div>
 					</div>
 				</button>)}
-				{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
+				{tip = (<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up" role="tooltip" />)}
 			</div>);
 
 			let thing = container.querySelector('button[data-a-target="player-theatre-mode-button"]');
@@ -1665,7 +1665,7 @@ export default class PlayerBase extends Module {
 		} else {
 			icon = cont.querySelector('figure');
 			btn = cont.querySelector('button');
-			tip = cont.querySelector('.tw-tooltip');
+			tip = cont.querySelector('.ffz-il-tooltip');
 		}
 
 		const pip_active = !!document.pictureInPictureElement,
@@ -1740,7 +1740,7 @@ export default class PlayerBase extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip__container">
+			cont = (<div class="ffz--player-reset tw-inline-flex tw-relative ffz-il-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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
@@ -1754,7 +1754,7 @@ export default class PlayerBase extends Module {
 						</div>
 					</div>
 				</button>)}
-				{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
+				{tip = (<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up" role="tooltip" />)}
 			</div>);
 
 			const thing = container.querySelector('.ffz--player-pip button') || container.querySelector('button[data-a-target="player-theatre-mode-button"]') || container.querySelector('button[data-a-target="player-fullscreen-button"]');
@@ -1765,7 +1765,7 @@ export default class PlayerBase extends Module {
 
 		} else {
 			btn = cont.querySelector('button');
-			tip = cont.querySelector('.tw-tooltip');
+			tip = cont.querySelector('.ffz-il-tooltip');
 		}
 
 		btn.setAttribute('aria-label',
@@ -1808,7 +1808,7 @@ export default class PlayerBase extends Module {
 		}
 
 		if ( ! cont ) {
-			cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-tooltip__container tw-mg-1">
+			cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 ffz-il-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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
 					type="button"
@@ -1822,14 +1822,14 @@ export default class PlayerBase extends Module {
 						</div>
 					</div>
 				</button>)}
-				{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
+				{tip = (<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up" role="tooltip" />)}
 			</div>);
 
 			container.appendChild(cont);
 
 		} else {
 			btn = cont.querySelector('button');
-			tip = cont.querySelector('.tw-tooltip');
+			tip = cont.querySelector('.ffz-il-tooltip');
 		}
 
 		btn.setAttribute('aria-label',

src/sites/twitch-twilight/modules/chat/emote_menu.jsx

@@ -541,7 +541,7 @@ export default class EmoteMenu extends Module {
 
 				const tones = Object.entries(emoji.variants).map(([tone, emoji]) => this.renderTone(emoji, tone));
 
-				return (<div class="tw-absolute ffz-balloon tw-tooltip--up tw-tooltip--align-right ffz-balloon tw-block">
+				return (<div class="tw-absolute ffz-balloon ffz-il-tooltip--up ffz-il-tooltip--align-right ffz-balloon tw-block">
 					<div class="tw-border-b tw-border-l tw-border-r tw-border-t tw-border-radius-medium tw-c-background-base tw-elevation-1">
 						{this.renderTone(emoji, null)}
 						{tones}
@@ -1013,7 +1013,7 @@ export default class EmoteMenu extends Module {
 					const padding = t.chat.context.get('chat.emote-menu.reduced-padding');
 
 					return (<div
-						class={`ffz-balloon ffz-balloon--md tw-tooltip--up tw-tooltip--align-right tw-block tw-absolute ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
+						class={`ffz-balloon ffz-balloon--md ffz-il-tooltip--up ffz-il-tooltip--align-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">
@@ -2425,7 +2425,7 @@ export default class EmoteMenu extends Module {
 												choices={this.state.tone_emoji}
 												pickTone={this.pickTone}
 											/>}
-											{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
+											{(no_tabs || ! is_emoji) && <div class="tw-relative ffz-il-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 ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' ffz-core-button--primary' : ' tw-button-icon'}`}
 													onClick={this.toggleVisibilityControl}
@@ -2434,7 +2434,7 @@ export default class EmoteMenu extends Module {
 														<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">
+												<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-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')

src/sites/twitch-twilight/modules/chat/line.js

@@ -323,7 +323,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__container' : ''}`,
+						className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''}`,
 						role: 'button',
 						style: { color },
 						onClick: this.ffz_user_click_handler,
@@ -333,7 +333,7 @@ export default class ChatLine extends Module {
 							className: 'chat-author__display-name'
 						}, override_name),
 						e('div', {
-							className: 'tw-tooltip tw-tooltip--down tw-tooltip--align-center'
+							className: 'ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center'
 						}, user_block)
 					] : user_block)
 				]);
@@ -522,7 +522,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__container' : ''}`,
+						className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''}`,
 						role: 'button',
 						style: { color },
 						onClick: this.ffz_user_click_handler,
@@ -532,7 +532,7 @@ other {# messages were deleted by a moderator.}
 							className: 'chat-author__display-name'
 						}, override_name),
 						e('div', {
-							className: 'tw-tooltip tw-tooltip--down tw-tooltip--align-center'
+							className: 'ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center'
 						}, user_block)
 					] : user_block)
 				];

src/sites/twitch-twilight/modules/directory/index.jsx

@@ -413,14 +413,14 @@ 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__container">
+					<div class="tw-relative ffz-il-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" />
 							</div>
 							{el.ffz_uptime_span = <p />}
 						</div>
-						<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+						<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 							{this.i18n.t('metadata.uptime.tooltip', 'Stream Uptime')}
 							{el.ffz_uptime_tt = <div class="tw-pd-t-05" />}
 						</div>
@@ -434,7 +434,7 @@ export default class Directory extends SiteModule {
 			return this.clearUptime(el);
 
 		if ( ! el.ffz_uptime_tt )
-			el.ffz_uptime_tt = el.ffz_uptime_el.querySelector('.tw-tooltip > div');
+			el.ffz_uptime_tt = el.ffz_uptime_el.querySelector('.ffz-il-tooltip > div');
 		if ( ! el.ffz_uptime_tt )
 			return this.clearUptime(el);
 

src/sites/twitch-twilight/modules/menu_button.jsx

@@ -452,7 +452,7 @@ export default class MenuButton extends SiteModule {
 						</span>) : null }
 					</div>) : null}
 					{ ! data.unclosable && (<button
-						class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
+						class="tw-button-icon tw-mg-l-05 tw-relative ffz-il-tooltip__container"
 						onClick={data._remove}
 					>
 						<span class="tw-button-icon__icon">
@@ -544,7 +544,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__container">
+			<div class="tw-inline-flex tw-relative ffz-il-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 ffz-core-button ffz-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
@@ -556,14 +556,14 @@ export default class MenuButton extends SiteModule {
 						</span>
 					</div>
 				</button>)}
-				{this.has_error && (<div class={`tw-absolute ffz-balloon ffz-balloon--lg tw-block ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}>
+				{this.has_error && (<div class={`tw-absolute ffz-balloon ffz-balloon--lg tw-block ${is_mod ? 'ffz-il-tooltip--up ffz-il-tooltip--align-left' : 'ffz-il-tooltip--down ffz-il-tooltip--align-right'}`}>
 					<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4 tw-pd-1">
 						<div class="tw-flex tw-align-items-center">
 							<div class="tw-flex-grow-1">
 								{ this.error.i18n ? this.i18n.t(this.error.i18n, this.error.text) : this.error.text }
 							</div>
 							{this.error.permanent ? null : (<button
-								class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
+								class="tw-button-icon tw-mg-l-05 tw-relative ffz-il-tooltip__container"
 								onClick={() => this.error = null} // eslint-disable-line react/jsx-no-bind
 							>
 								<span class="tw-button-icon__icon">
@@ -573,7 +573,7 @@ export default class MenuButton extends SiteModule {
 						</div>
 					</div>
 				</div>)}
-				<div class={`tw-tooltip ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}>
+				<div class={`ffz-il-tooltip ${is_mod ? 'ffz-il-tooltip--up ffz-il-tooltip--align-left' : 'ffz-il-tooltip--down ffz-il-tooltip--align-right'}`}>
 					{this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
 					{this.has_update && (<div class="tw-mg-t-1">
 						{this.i18n.t('site.menu_button.update-desc', 'There is an update available. Please refresh your page.')}
@@ -601,7 +601,7 @@ export default class MenuButton extends SiteModule {
 				</div>
 			</div>
 			{(inst || container)._ffz_toast_el = (<div
-				class={`ffz-toast--container tw-absolute tw-block ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}
+				class={`ffz-toast--container tw-absolute tw-block ${is_mod ? 'ffz-il-tooltip--up ffz-il-tooltip--align-left' : 'ffz-il-tooltip--down ffz-il-tooltip--align-right'}`}
 				onmouseenter={this.pauseToasts}
 				onmouseleave={this.unpauseToasts}
 			>
@@ -737,7 +737,7 @@ export default class MenuButton extends SiteModule {
 				<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">
+							<div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
 								<button
 									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-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
@@ -746,7 +746,7 @@ export default class MenuButton extends SiteModule {
 										<figure class="ffz-i-t-reset" />
 									</span>
 								</button>
-								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
+								<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
 									{ this.i18n.t('player.reset_button.all', 'Reset All Players (Double-Click)') }
 								</div>
 							</div>
@@ -757,7 +757,7 @@ export default class MenuButton extends SiteModule {
 							</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">
+							<div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
 								<button
 									class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-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
@@ -766,7 +766,7 @@ export default class MenuButton extends SiteModule {
 										<figure class="ffz-i-cog" />
 									</span>
 								</button>
-								<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
+								<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
 									{ this.i18n.t('setting.profiles.configure', 'Configure') }
 								</div>
 							</div>

src/sites/twitch-twilight/modules/video_chat/index.jsx

@@ -357,11 +357,11 @@ 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__container">
+					<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative ffz-il-tooltip__container">
 						• { t.i18n.t('video-chat.time', '{time,humantime} ago', {
 							time: msg.timestamp
 						}) }
-						<div class="tw-tooltip tw-tooltip--align-center tw-tooltip--up" role="tooltip">
+						<div class="ffz-il-tooltip ffz-il-tooltip--align-center ffz-il-tooltip--up" role="tooltip">
 							{ t.i18n.formatDateTime(msg.timestamp, 'full') }
 						</div>
 					</span>
@@ -394,13 +394,13 @@ 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__container">
+								<div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
 									<button class="tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-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>
 										</div>
 									</button>
-									<div class="tw-tooltip tw-tooltip--align-left tw-tooltip--up" role="tooltip">
+									<div class="ffz-il-tooltip ffz-il-tooltip--align-left ffz-il-tooltip--up" role="tooltip">
 										{t.i18n.t('video-chat.jump', 'Jump to Video')}
 									</div>
 								</div>

src/std-components/balloon.vue

@@ -34,9 +34,9 @@ export default {
 			if ( this.dir ) {
 				dir = this.dir.split('-').map(d => {
 					if ( d === 'up' || d === 'down' )
-						return `tw-tooltip--${d}`;
+						return `ffz-il-tooltip--${d}`;
 					if ( d === 'left' || d === 'right' )
-						return `tw-tooltip--align-${d}`;
+						return `ffz-il-tooltip--align-${d}`;
 					return '';
 				}).join(' ');
 			}

src/std-components/color-picker.vue

@@ -33,7 +33,7 @@
 		</div>
 		<div
 			v-else
-			:class="{'tw-tooltip__container': hasTooltip}"
+			:class="{'ffz-il-tooltip__container': hasTooltip}"
 			class="tw-relative"
 		>
 			<button
@@ -51,13 +51,13 @@
 				v-if="open"
 				v-on-clickaway="closePicker"
 				:class="{'ffz-bottom-100': openUp}"
-				class="tw-absolute tw-z-above tw-tooltip--down tw-tooltip--align-right"
+				class="tw-absolute tw-z-above ffz-il-tooltip--down ffz-il-tooltip--align-right"
 			>
 				<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
 			</div>
 			<div
 				v-if="! open && hasTooltip"
-				class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"
+				class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right"
 			>
 				{{ tooltip }}
 				<div v-if="nullable" class="tw-regular">

src/std-components/icon-picker.vue

@@ -25,14 +25,14 @@
 				>
 				<button
 					v-if="clearable"
-					class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text tw-tooltip__container"
+					class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text ffz-il-tooltip__container"
 					@click="change('', false)"
 					@keydown.escape="open = false"
 					@focus="onFocus(false)"
 					@blur="onBlur"
 				>
 					<span class="tw-button__text ffz-i-trash" />
-					<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
+					<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-right">
 						{{ t('setting.icon.clear', 'Clear') }}
 					</div>
 				</button>

src/std-components/key-picker.vue

@@ -23,11 +23,11 @@
 			</div>
 
 			<button
-				class="ffz-button--hollow ffz-clear-key tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-border-l tw-z-default tw-pd-x-1 tw-tooltip__container"
+				class="ffz-button--hollow ffz-clear-key tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-border-l tw-z-default tw-pd-x-1 ffz-il-tooltip__container"
 				@click="clear"
 			>
 				<figure class="ffz-i-trash" />
-				<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
 					{{ t('setting.clear', 'Clear') }}
 				</div>
 			</button>

src/std-components/tooltip.vue

@@ -1,9 +1,9 @@
 <template functional>
-	<div class="tw-relative tw-tooltip__container">
+	<div class="tw-relative ffz-il-tooltip__container">
 		<slot />
 		<div
-			:class="`tw-tooltip--align-${props.align||'center'} tw-tooltip--${props.above ? 'up' : 'down'}`"
+			:class="`ffz-il-tooltip--align-${props.align||'center'} ffz-il-tooltip--${props.above ? 'up' : 'down'}`"
-			class="tw-tooltip"
+			class="ffz-il-tooltip"
 		>
 			<slot name="tooltip" />
 		</div>

src/utilities/markdown.js

@@ -19,8 +19,6 @@ function loadMD() {
 			import(/* webpackChunkName: 'markdown' */ 'markdown-it'),
 			import(/* webpackChunkName: 'markdown' */ 'markdown-it-link-attributes')
 		]).then(modules => {
-			console.log('loaded', modules);
-
 			MD = modules[0]?.default;
 			MILA = modules[1]?.default;
 

styles/native/balloon.scss

@@ -0,0 +1,179 @@
+.ffz-balloon {
+	max-width: 90vw;
+	min-width: 16rem;
+	z-index: 2000;
+
+	& > &__tail {
+		height: 16px;
+		width: 16px;
+
+		& .ffz-balloon-symbol {
+			height: 8px;
+			transform: rotate(45deg) translate(-50%,-50%);
+			transform-origin: 0 0;
+			width: 8px;
+		}
+	}
+
+	&--overlay-border {
+		border: 2px solid var(--color-border-balloon-overlay);
+	}
+
+	&--left {
+		margin-right: 8px;
+		right: 100%;
+
+		& > .ffz-balloon__tail {
+			left: 100%;
+			margin-left: -1px;
+
+			& .ffz-balloon__tail-symbol {
+				right: 8px;
+			}
+		}
+	}
+
+	&--right {
+		left: 100%;
+		margin-left: 8px;
+
+		& > .ffz-balloon__tail {
+			margin-right: -1px;
+			right: 100%;
+
+			& .ffz-balloon__tail-symbol {
+				right: -8px;
+			}
+		}
+	}
+
+	&--left, &--right {
+		top: 0;
+
+		& > .ffz-balloon__tail {
+			top: 8px;
+
+			& .ffz-balloon__tail-symbol {
+				top: 50%;
+			}
+		}
+
+		&.ffz-balloon--center {
+			top: 50%;
+			transform: translateY(-50%);
+
+			& > .ffz-balloon__tail {
+				margin-top: -5.33333px;
+				top: 50%;
+			}
+		}
+	}
+
+	&--up {
+		bottom: 100%;
+		left: 0;
+		margin-bottom: 8px;
+		top: auto;
+
+		& > .ffz-balloon__tail {
+			margin-top: -1px;
+			top: 100%;
+
+			& .ffz-balloon__tail-symbol {
+				bottom: 8px;
+				top: auto;
+			}
+		}
+	}
+
+	&--down, &--up {
+		& > .ffz-balloon__tail .ffz-balloon__tail-symbol {
+			left: 50%;
+		}
+
+		&.ffz-balloon--left {
+			left: 0;
+			right: auto;
+
+			& > .ffz-balloon__tail {
+				left: 0;
+			}
+		}
+
+		&.ffz-balloon--center {
+			left: 50%;
+			transform: translateX(-50%);
+
+			& > .ffz-balloon__tail {
+				left: 50%;
+				margin-left: -8px;
+			}
+		}
+
+		&.ffz-balloon--right {
+			left: auto;
+			right: 0;
+
+			& > .ffz-balloon__tail {
+				left: 100%;
+				margin-left: -16px;
+				top: 100%;
+			}
+		}
+	}
+
+	&--down {
+		left: 0;
+		margin-top: 8px;
+		top: 100%;
+
+		& > .ffz-balloon__tail {
+			bottom: 100%;
+			margin-bottom: -1px;
+
+			& .ffz-balloon__tail-symbol {
+				bottom: -8px;
+				top: auto;
+			}
+		}
+
+		&.ffz-balloon--right {
+			top: 100%;
+
+			& > .ffz-balloon__tail {
+				left: 100%;
+				margin-left: -16px;
+				top: auto;
+			}
+		}
+	}
+
+	&--xs {
+		min-width: 10rem;
+		width: 10rem;
+	}
+
+	&--auto {
+		min-width: 0;
+		white-space: nowrap;
+	}
+
+	&--sm { width: 20rem }
+	&--md { width: 30rem }
+	&--lg { width: 40rem }
+	&--xl { width: 50rem }
+}
+
+.tw-attached {
+	position: absolute;
+	z-index: var(--z-index-balloon);
+
+	&--up { margin-bottom: 0 }
+	&--down { margin-top: 0 }
+	&--left { margin-right: 0 }
+	&--right { margin-left: 0 }
+
+	&--up.tw-attached--right {
+		inset: auto 0px 100% auto;
+	}
+}

styles/native/index.scss

@@ -6,3 +6,5 @@
 @import "card";
 @import "tag";
 @import "progress";
+@import "tooltip";
+@import "balloon";

styles/native/tooltip.scss

@@ -0,0 +1,145 @@
+.ffz-il-tooltip {
+	user-select: none;
+	background-color: var(--color-background-tooltip);
+	border-radius: var(--border-radius-medium);
+	color: var(--color-text-tooltip);
+
+	font-size: var(--font-size-6);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--line-height-heading);
+
+	display: none;
+	position: absolute;
+	text-align: left;
+
+	padding: 3px 6px;
+	pointer-events: none;
+	white-space: nowrap;
+	z-index: var(--z-index-balloon);
+	display: none;
+
+	.tw-root--hover &__container:hover &,
+	.tw-root--touch &__container:hover &,
+	&__container--show & {
+		display: block;
+	}
+
+	&:before,&:after {
+		content: '';
+		position: absolute;
+	}
+
+	&:before {
+		height: calc(100% + 12px);
+		left: -6px;
+		top: -6px;
+		width: calc(100% + 12px);
+		z-index: -1;
+	}
+
+	&:after {
+		background-color: var(--color-background-tooltip);
+		height: 6px;
+		transform: rotate(45deg);
+		width: 6px;
+		z-index: -1;
+	}
+
+	&--wrap { white-space: normal; }
+
+	&--left {
+		left: auto;
+		margin-right: 6px;
+		right: 100%;
+		top: 0;
+
+		&:after {
+			border-radius: 0 var(--border-radius-small) 0 0;
+			left: 100%;
+			margin-left: -3px;
+			top: 6px;
+		}
+	}
+
+	&--right {
+		left: 100%;
+		margin-left: 6px;
+		top: 0;
+
+		&:after {
+			border-radius: 0 0 0 var(--border-radius-small);
+			left: 0;
+			margin-left: -3px;
+			top: 6px;
+		}
+	}
+
+	&--left.ffz-il-tooltip--align-center,
+	&--right.ffz-il-tooltip--align-center {
+		top: 50%;
+		transform: translateY(-50%);
+
+		&:after {
+			margin-top: -3px;
+			top: 50%;
+		}
+	}
+
+	&--up {
+		bottom: 100%;
+		left: 0;
+		margin-bottom: 6px;
+		top: auto;
+
+		&:after {
+			border-radius: 0 0 var(--border-radius-small);
+			left: 6px;
+			margin-top: -3px;
+			top: 100%;
+		}
+	}
+
+	&--down {
+		left: 0;
+		margin-top: 6px;
+		top: 100%;
+
+		&:after {
+			border-radius: var(--border-radius-small) 0 0;
+			left: 6px;
+			top: -3px;
+		}
+	}
+
+	&--down.ffz-il-tooltip--align-center,
+	&--up.ffz-il-tooltip--align-center {
+		left: 50%;
+		transform: translateX(-50%);
+
+		&:after {
+			left: 50%;
+			margin-left: -3px;
+		}
+	}
+
+	&--down.ffz-il-tooltip--align-right,
+	&--up.ffz-il-tooltip--align-right {
+		left: auto;
+		right: 0;
+		top: auto;
+
+		&:after {
+			left: 100%;
+			margin-left: -12px;
+			top: 100%;
+		}
+	}
+
+	&--down.ffz-il-tooltip--align-right {
+		top: 100%;
+
+		&:after {
+			top: -3px;
+		}
+	}
+}

styles/structure/balloon.scss

@@ -1,4 +1,4 @@
-.ffz-balloon {
+/*.ffz-balloon {
 	max-width: 90vw;
 	min-width: 16rem;
 
@@ -20,4 +20,4 @@
 
 .ffz-balloon--overlay-border {
 	border: 2px solid var(--color-border-balloon-overlay);
-}
+}*/