Using teleport for tooltips. Moved theme class to body tag with UI observer.

assets/components/filters/channel-filter.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-popover class="filter-container">
+	<Tooltip class="filter-container">
 		<div class="filter">
 			<Icon icon="antenna" />
 
@@ -14,60 +14,62 @@
 			>Channels</div>
 		</div>
 
-		<div slot="popover">
-			<router-link
-				class="filter-clear"
-				:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
-				:class="{ active: selectedLength > 0 }"
-			>clear all<Icon icon="cross2" /></router-link>
+		<template v-slot:popover>
+			<div slot="popover">
+				<router-link
+					class="filter-clear"
+					:to="{ query: { ...$route.query, channels: undefined, networks: undefined } }"
+					:class="{ active: selectedLength > 0 }"
+				>clear all<Icon icon="cross2" /></router-link>
 
-			<ul class="filter-items nolist">
-				<li
-					v-for="channel in channelsPerNetwork"
-					:key="`channel-${channel.id}`"
-					class="filter-item"
-					:class="{
-						[channel.type]: true,
-						independent: channel.independent,
-						selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
-						disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
-					}"
-				>
-					<router-link
-						:to="{ query: {
-							...$route.query,
-							[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
-							[channel.type === 'network' ? 'channels' : 'networks']: undefined,
-						}, params: { pageNumber: 1 } }"
-						class="filter-name"
+				<ul class="filter-items nolist">
+					<li
+						v-for="channel in channelsPerNetwork"
+						:key="`channel-${channel.id}`"
+						class="filter-item"
+						:class="{
+							[channel.type]: true,
+							independent: channel.independent,
+							selected: channel.type === 'network' ? selectedNetworks.includes(channel.slug) : selectedChannels.includes(channel.slug),
+							disabled: channel.parent && selectedNetworks.includes(channel.parent.slug),
+						}"
 					>
-						<img
-							v-if="channel.type === 'network' || channel.independent || !channel.parent "
-							:src="`/img/logos/${channel.slug}/favicon.png`"
-							class="favicon"
+						<router-link
+							:to="{ query: {
+								...$route.query,
+								[channel.type === 'network' ? 'networks' : 'channels']: channel.slug,
+								[channel.type === 'network' ? 'channels' : 'networks']: undefined,
+							}, params: { pageNumber: 1 } }"
+							class="filter-name"
 						>
+							<img
+								v-if="channel.type === 'network' || channel.independent || !channel.parent "
+								:src="`/img/logos/${channel.slug}/favicon.png`"
+								class="favicon"
+							>
 
-						{{ channel.name }}
-					</router-link>
+							{{ channel.name }}
+						</router-link>
 
-					<router-link
-						:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
-						class="filter-include"
-					>
-						<Icon
-							icon="checkmark"
-							class="filter-add"
-						/>
+						<router-link
+							:to="{ query: { ...$route.query, ...getNewRange(channel) }, params: { pageNumber: 1 } }"
+							class="filter-include"
+						>
+							<Icon
+								icon="checkmark"
+								class="filter-add"
+							/>
 
-						<Icon
-							icon="cross2"
-							class="filter-remove"
-						/>
-					</router-link>
-				</li>
-			</ul>
-		</div>
-	</v-popover>
+							<Icon
+								icon="cross2"
+								class="filter-remove"
+							/>
+						</router-link>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</Tooltip>
 </template>
 
 <script>