diff --git a/hwe/scss/map.scss b/hwe/scss/map.scss
index 178436a7..2a884569 100644
--- a/hwe/scss/map.scss
+++ b/hwe/scss/map.scss
@@ -1,11 +1,5 @@
 @charset 'utf-8';
 
-.map_title_tooltiptext .tooltip-inner {
-  max-width: 220px;
-  width: 220px;
-  text-align: left;
-}
-
 .map_title_text {
   margin: auto;
   text-align: center;
diff --git a/hwe/ts/components/MapViewer.vue b/hwe/ts/components/MapViewer.vue
index 1bfb8fa2..888219be 100644
--- a/hwe/ts/components/MapViewer.vue
+++ b/hwe/ts/components/MapViewer.vue
@@ -13,11 +13,9 @@
     ]"
   >
     <div
-      v-my-tooltip.hover.top="{
-        class: 'map_title_tooltiptext',
-      }"
+      v-b-tooltip.hover.top="titleTooltip"
+      :title="titleTooltip"
       class="map_title"
-      :title="getTitleTooltip()"
     >
       <!-- eslint-disable-next-line vue/max-attributes-per-line -->
       <span class="map_title_text" :style="{ color: getTitleColor() }"
@@ -165,12 +163,11 @@ export type CityPositionMap = {
 </script>
 <script lang="ts" setup>
 import "@/../scss/map.scss";
-import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance } from "vue";
+import { type PropType, toRef, inject, type Ref, ref, watch, type ComponentPublicInstance, computed } from "vue";
 import { v4 as uuidv4 } from "uuid";
 import { CURRENT_MAP_VERSION, type MapResult } from "@/defs";
 import { joinYearMonth } from "@/util/joinYearMonth";
 import { parseYearMonth } from "@/util/parseYearMonth";
-import vMyTooltip from "@/directives/vMyTooltip";
 import type { GameConstStore } from "@/GameConstStore";
 import { unwrap_err } from "@/util/unwrap_err";
 import { getMaxRelativeTechLevel, TECH_LEVEL_YEAR_GAP } from "@/utilGame/techLevel";
@@ -282,7 +279,7 @@ function getBeginGameLimitTooltip(): string | undefined {
   return `초반제한 기간 : ${remainYear}년${remainMonth > 0 ? ` ${remainMonth}개월` : ""} (${startYear + 3}년)`;
 }
 
-function getTitleTooltip(): string {
+const titleTooltip = computed(()=>{
   const result: string[] = [];
   const beginLimit = getBeginGameLimitTooltip();
   if (beginLimit) {
@@ -302,7 +299,7 @@ function getTitleTooltip(): string {
   }
 
   return result.join("<br>");
-}
+});
 
 function getMapSeasonClassName(): string {
   const { month } = mapData.value;
diff --git a/hwe/ts/directives/vMyTooltip.ts b/hwe/ts/directives/vMyTooltip.ts
deleted file mode 100644
index 6032a0d1..00000000
--- a/hwe/ts/directives/vMyTooltip.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { Directive, DirectiveBinding } from 'vue'
-import Tooltip from 'bootstrap/js/dist/tooltip'
-
-function resolveTrigger(modifiers: DirectiveBinding['modifiers']): Tooltip.Options['trigger'] {
-  if (modifiers.manual) {
-    return 'manual'
-  }
-
-  const trigger: string[] = []
-
-  if (modifiers.click) {
-    trigger.push('click')
-  }
-
-  if (modifiers.hover) {
-    trigger.push('hover')
-  }
-
-  if (modifiers.focus) {
-    trigger.push('focus')
-  }
-
-  if (trigger.length > 0) {
-    return trigger.join(' ') as Tooltip.Options['trigger']
-  }
-
-  return 'hover focus'
-}
-
-function resolvePlacement(modifiers: DirectiveBinding['modifiers']): Tooltip.Options['placement'] {
-  if (modifiers.left) {
-    return 'left'
-  }
-
-  if (modifiers.right) {
-    return 'right'
-  }
-
-  if (modifiers.bottom) {
-    return 'bottom'
-  }
-
-  return 'top'
-}
-
-function resolveDelay(values: TooltipOptions): Tooltip.Options['delay'] {
-  if (values?.delay) {
-    return values.delay
-  }
-
-  return 0
-}
-
-type TooltipOptions = {
-  delay?: number,
-  class?: string
-} | undefined;
-
-const vMyTooltip: Directive<HTMLElement, TooltipOptions> = {
-  beforeMount(el, binding) {
-    el.setAttribute('data-bs-toogle', 'tooltip')
-
-    const isHtml = /<("[^"]*"|'[^']*'|[^'">])*>/.test(el.title)
-    const trigger = resolveTrigger(binding.modifiers)
-    const placement = resolvePlacement(binding.modifiers)
-    const delay = resolveDelay(binding.value)
-
-    const options: Partial<Tooltip.Options> = {
-      trigger,
-      placement,
-      delay,
-      html: isHtml,
-    }
-    const customClass = binding.value?.class;
-    if (customClass) {
-      options.customClass = customClass;
-    }
-
-    new Tooltip(el, options)
-  },
-  updated(el) {
-    const title = el.getAttribute('title')
-
-    if (title !== '') {
-      const instance = Tooltip.getInstance(el)
-      instance?.hide()
-      el.setAttribute('data-bs-original-title', title || '')
-      el.setAttribute('title', '')
-    }
-  },
-  unmounted(el) {
-    const instance = Tooltip.getInstance(el)
-    instance?.dispose()
-  },
-}
-
-export default vMyTooltip