diff --git a/src/components/components/ComponentContainer.vue b/src/components/components/ComponentContainer.vue
index f4dc90022..c12d0d479 100644
--- a/src/components/components/ComponentContainer.vue
+++ b/src/components/components/ComponentContainer.vue
@@ -9,6 +9,7 @@ import { useDialogStore } from "../../store/dialogStore";
 import { useContentStore } from "../../store/contentStore";
 
 import ComponentTag from "../utilities/ComponentTag.vue";
+import TagTooltip from "../utilities/TagTooltip.vue";
 import { chartTypes } from "../../assets/configs/apexcharts/chartTypes";
 
 const dialogStore = useDialogStore();
@@ -23,6 +24,9 @@ const props = defineProps({
 
 // The default active chart is the first one in the list defined in the dashboard component
 const activeChart = ref(props.content.chart_config.types[0]);
+// stores the location of the mouse when tags are hovered over
+const mousePosition = ref({ x: null, y: null });
+const showTagTooltip = ref(false);
 
 // Parses time data into display format
 const dataTime = computed(() => {
@@ -54,6 +58,13 @@ const updateFreq = computed(() => {
 		unitRef[props.content.update_freq_unit]
 	}更新`;
 });
+// The style for the tag tooltip
+const tooltipPosition = computed(() => {
+	return {
+		left: `${mousePosition.value.x - 40}px`,
+		top: `${mousePosition.value.y - 110}px`,
+	};
+});
 
 // Toggles between chart types defined in the dashboard component
 function changeActiveChart(chartName) {
@@ -66,6 +77,15 @@ function toggleFavorite() {
 		contentStore.favoriteComponent(props.content.id);
 	}
 }
+// Updates the location for the tag tooltip
+function updateMouseLocation(e) {
+	mousePosition.value.x = e.pageX;
+	mousePosition.value.y = e.pageY;
+}
+// Updates whether to show the tag tooltip
+function changeShowTagTooltipState(state) {
+	showTagTooltip.value = state;
+}
 </script>
 
 <template>
@@ -80,7 +100,17 @@ function toggleFavorite() {
 			<div>
 				<h3>
 					{{ content.name }}
-					<ComponentTag icon="" :text="updateFreq" mode="small" />
+					<ComponentTag
+						icon=""
+						:text="updateFreq"
+						mode="small"
+						@click="
+							dialogStore.showNotification(
+								'info',
+								'為內部版本更新頻率，本展示站台均為靜態資料'
+							)
+						"
+					/>
 				</h3>
 				<h4>{{ `${content.source} | ${dataTime}` }}</h4>
 			</div>
@@ -175,40 +205,26 @@ function toggleFavorite() {
 			<div></div>
 		</div>
 		<div class="componentcontainer-footer">
-			<div>
+			<div
+				@mouseenter="changeShowTagTooltipState(true)"
+				@mousemove="updateMouseLocation"
+				@mouseleave="changeShowTagTooltipState(false)"
+			>
 				<ComponentTag
 					v-if="content.chart_config.map_filter && content.map_config"
 					icon="tune"
 					text="篩選地圖"
-					@click="
-						dialogStore.showNotification(
-							'info',
-							'本組件有篩選地圖功能，歡迎至地圖頁面嘗試'
-						)
-					"
 					class="hide-if-mobile"
 				/>
 				<ComponentTag
 					v-if="content.map_config"
 					icon="map"
 					text="空間資料"
-					@click="
-						dialogStore.showNotification(
-							'info',
-							'本組件有空間資料，歡迎至地圖頁面查看'
-						)
-					"
 				/>
 				<ComponentTag
 					v-if="content.history_data"
 					icon="insights"
 					text="歷史資料"
-					@click="
-						dialogStore.showNotification(
-							'info',
-							'本組件有歷史資訊，點擊「組件資訊」以查看'
-						)
-					"
 					class="history-tag"
 				/>
 			</div>
@@ -221,6 +237,16 @@ function toggleFavorite() {
 				<span>arrow_circle_right</span>
 			</button>
 		</div>
+		<Teleport to="body">
+			<!-- The class "chart-tooltip" could be edited in /assets/styles/chartStyles.css -->
+			<TagTooltip
+				v-if="showTagTooltip"
+				:position="tooltipPosition"
+				:hasFilter="content.chart_config.map_filter ? true : false"
+				:hasMapLayer="content.map_config ? true : false"
+				:hasHistory="content.history_data ? true : false"
+			/>
+		</Teleport>
 	</div>
 </template>
 
diff --git a/src/components/components/ComponentMapChart.vue b/src/components/components/ComponentMapChart.vue
index e46531c8f..a3643c98c 100644
--- a/src/components/components/ComponentMapChart.vue
+++ b/src/components/components/ComponentMapChart.vue
@@ -8,6 +8,7 @@ import { ref, computed } from "vue";
 import { useMapStore } from "../../store/mapStore";
 import { useDialogStore } from "../../store/dialogStore";
 
+import TagTooltip from "../utilities/TagTooltip.vue";
 import { chartTypes } from "../../assets/configs/apexcharts/chartTypes";
 
 const mapStore = useMapStore();
@@ -23,6 +24,9 @@ const props = defineProps({
 const activeChart = ref(props.content.chart_config.types[0]);
 // Stores whether the component is toggled on or not
 const checked = ref(false);
+// stores the location of the mouse when tags are hovered over
+const mousePosition = ref({ x: null, y: null });
+const showTagTooltip = ref(false);
 
 // Parses time data into display format
 const dataTime = computed(() => {
@@ -52,6 +56,14 @@ const shouldDisable = computed(() => {
 	);
 });
 
+// The style for the tag tooltip
+const tooltipPosition = computed(() => {
+	return {
+		left: `${mousePosition.value.x - 40}px`,
+		top: `${mousePosition.value.y - 110}px`,
+	};
+});
+
 // Open and closes the component as well as communicates to the mapStore to turn on and off map layers
 function handleToggle() {
 	if (!props.content.map_config) {
@@ -77,6 +89,15 @@ function changeActiveChart(chartName) {
 		`${props.content.map_config[0].index}-${props.content.map_config[0].type}`
 	);
 }
+// Updates the location for the tag tooltip
+function updateMouseLocation(e) {
+	mousePosition.value.x = e.pageX;
+	mousePosition.value.y = e.pageY;
+}
+// Updates whether to show the tag tooltip
+function changeShowTagTooltipState(state) {
+	showTagTooltip.value = state;
+}
 </script>
 
 <template>
@@ -91,39 +112,21 @@ function changeActiveChart(chartName) {
 			<div>
 				<div>
 					<h3>{{ content.name }}</h3>
-					<span
-						v-if="
-							content.chart_config.map_filter &&
-							content.map_config
-						"
-						@click="
-							dialogStore.showNotification(
-								'info',
-								'本組件有篩選地圖功能，點擊圖表資料點以篩選'
-							)
-						"
-						>tune</span
-					>
-					<span
-						v-if="content.map_config"
-						@click="
-							dialogStore.showNotification(
-								'info',
-								'本組件有空間資料，點擊開關以顯示地圖'
-							)
-						"
-						>map</span
-					>
-					<span
-						v-if="content.history_data"
-						@click="
-							dialogStore.showNotification(
-								'info',
-								'回到儀表板頁面並點擊「組件資訊」以查看'
-							)
-						"
-						>insights</span
+					<div
+						@mouseenter="changeShowTagTooltipState(true)"
+						@mousemove="updateMouseLocation"
+						@mouseleave="changeShowTagTooltipState(false)"
 					>
+						<span
+							v-if="
+								content.chart_config.map_filter &&
+								content.map_config
+							"
+							>tune</span
+						>
+						<span v-if="content.map_config">map</span>
+						<span v-if="content.history_data">insights</span>
+					</div>
 				</div>
 				<h4 v-if="checked">{{ `${content.source} | ${dataTime}` }}</h4>
 			</div>
@@ -181,6 +184,16 @@ function changeActiveChart(chartName) {
 				<span>arrow_circle_right</span>
 			</button>
 		</div>
+		<Teleport to="body">
+			<!-- The class "chart-tooltip" could be edited in /assets/styles/chartStyles.css -->
+			<TagTooltip
+				v-if="showTagTooltip"
+				:position="tooltipPosition"
+				:hasFilter="content.chart_config.map_filter ? true : false"
+				:hasMapLayer="content.map_config ? true : false"
+				:hasHistory="content.history_data ? true : false"
+			/>
+		</Teleport>
 	</div>
 </template>
 
diff --git a/src/components/utilities/ComponentTag.vue b/src/components/utilities/ComponentTag.vue
index b7b830e22..ea0d5632e 100644
--- a/src/components/utilities/ComponentTag.vue
+++ b/src/components/utilities/ComponentTag.vue
@@ -3,10 +3,6 @@
 <!-- This component has two modes "outline" and "fill" which is controlled via the prop "mode" -->
 
 <script setup>
-import { useDialogStore } from "../../store/dialogStore";
-
-const dialogStore = useDialogStore();
-
 defineProps({
 	icon: String,
 	text: String,
@@ -24,12 +20,6 @@ defineProps({
 			'componenttag-fill': mode === 'fill',
 			'componenttag-small': mode === 'small',
 		}"
-		@click="
-			dialogStore.showNotification(
-				'info',
-				'為內部版本更新頻率，本展示站台均為靜態資料'
-			)
-		"
 	>
 		<span v-if="icon">{{ icon }}</span>
 		<p>{{ text }}</p>
diff --git a/src/components/utilities/TagTooltip.vue b/src/components/utilities/TagTooltip.vue
new file mode 100644
index 000000000..31b902f2d
--- /dev/null
+++ b/src/components/utilities/TagTooltip.vue
@@ -0,0 +1,46 @@
+<script setup>
+const props = defineProps({
+	position: { type: Object },
+	hasFilter: { type: Boolean, default: false },
+	hasMapLayer: { type: Boolean, default: false },
+	hasHistory: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+	<div :style="props.position" class="chart-tooltip tagtooltip">
+		<h6>組件資訊與功能</h6>
+		<p>
+			<span>{{ props.hasFilter ? "check" : "clear" }}</span
+			>用圖表篩選地圖
+		</p>
+		<p>
+			<span>{{ props.hasMapLayer ? "check" : "clear" }}</span
+			>具備空間資料(地圖交叉比對)
+		</p>
+		<p>
+			<span>{{ props.hasHistory ? "check" : "clear" }}</span
+			>具備歷史資料(組件資訊)
+		</p>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.tagtooltip {
+	position: fixed;
+	box-shadow: 0px 0px 5px black;
+	z-index: 30;
+
+	p {
+		display: flex;
+		align-items: center;
+		font-size: 16px;
+
+		span {
+			font-family: var(--font-icon);
+			color: var(--color-highlight);
+			font-size: var(--font-m);
+		}
+	}
+}
+</style>