diff --git a/demo/Demo.vue b/demo/Demo.vue
index 9270f02..9e33e98 100644
--- a/demo/Demo.vue
+++ b/demo/Demo.vue
@@ -8,6 +8,7 @@ import { track } from "@vercel/analytics";
 
 import LogoChart from "./examples/LogoChart.vue";
 import BarChart from "./examples/BarChart.vue";
+import LineChart from "./examples/LineChart.vue";
 import PieChart from "./examples/PieChart.vue";
 import PolarChart from "./examples/PolarChart.vue";
 import ScatterChart from "./examples/ScatterChart.vue";
@@ -74,6 +75,7 @@ watch(codeOpen, (open) => {
     </p>
 
     <bar-chart />
+    <line-chart />
     <pie-chart />
     <polar-chart />
     <scatter-chart />
diff --git a/demo/data/line.js b/demo/data/line.js
new file mode 100644
index 0000000..64371c5
--- /dev/null
+++ b/demo/data/line.js
@@ -0,0 +1,52 @@
+export default function getData() {
+  return {
+    legend: { top: 20 },
+    tooltip: {
+      trigger: "axis",
+    },
+    dataset: {
+      source: [
+        ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
+        ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
+        ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
+        ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
+        ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
+      ],
+    },
+    xAxis: {
+      type: "category",
+      triggerEvent: true,
+      tooltip: { show: true, formatter: "" },
+    },
+    yAxis: {
+      triggerEvent: true,
+      tooltip: { show: true, formatter: "" },
+    },
+    series: [
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+      {
+        type: "line",
+        smooth: true,
+        seriesLayoutBy: "row",
+        emphasis: { focus: "series" },
+      },
+    ],
+  };
+}
diff --git a/demo/examples/Example.vue b/demo/examples/Example.vue
index 88fa11e..3e36779 100644
--- a/demo/examples/Example.vue
+++ b/demo/examples/Example.vue
@@ -43,7 +43,7 @@ defineProps({
   width: fit-content;
   margin: 2em auto;
 
-  .echarts {
+  > .echarts {
     width: calc(60vw + 4em);
     height: 360px;
     max-width: 720px;
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
new file mode 100644
index 0000000..b1404a5
--- /dev/null
+++ b/demo/examples/LineChart.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { use } from "echarts/core";
+import { LineChart, PieChart } from "echarts/charts";
+import {
+  GridComponent,
+  DatasetComponent,
+  LegendComponent,
+  TooltipComponent,
+} from "echarts/components";
+import { shallowRef } from "vue";
+import VChart from "../../src/ECharts";
+import VExample from "./Example.vue";
+import getData from "../data/line";
+
+use([
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  TooltipComponent,
+  PieChart,
+]);
+
+const option = shallowRef(getData());
+const axis = shallowRef("xAxis");
+
+function getPieOption(params) {
+  const option = {
+    dataset: { source: [params[0].dimensionNames, params[0].data] },
+    series: [
+      {
+        type: "pie",
+        radius: ["60%", "100%"],
+        seriesLayoutBy: "row",
+        itemStyle: {
+          borderRadius: 5,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: { position: "center", formatter: params[0].name },
+      },
+    ],
+  };
+  return option;
+}
+</script>
+
+<template>
+  <v-example
+    id="line"
+    title="Line chart"
+    desc="(with component rendered tooltip)"
+  >
+    <v-chart :option="option" autoresize>
+      <template #tooltip="{ params }">
+        <v-chart
+          :style="{ width: '100px', height: '100px' }"
+          :option="getPieOption(params)"
+          autoresize
+        />
+      </template>
+      <template #[`tooltip:${axis}`]="{ params }">
+        {{ axis === "xAxis" ? "Year" : "Value" }}:
+        <b>{{ params.name }}</b>
+      </template>
+    </v-chart>
+    <template #extra>
+      <p class="actions">
+        Custom tooltip on
+        <select v-model="axis">
+          <option value="xAxis">X Axis</option>
+          <option value="yAxis">Y Axis</option>
+        </select>
+      </p>
+    </template>
+  </v-example>
+</template>
diff --git a/package.json b/package.json
index e11bc79..a45bddd 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "docs": "node ./scripts/docs.mjs",
     "prepublishOnly": "pnpm run typecheck && pnpm run dev:typecheck && pnpm run build && publint"
   },
-  "packageManager": "pnpm@10.11.0",
+  "packageManager": "pnpm@10.12.1",
   "type": "module",
   "main": "dist/index.js",
   "unpkg": "dist/index.min.js",
@@ -50,7 +50,7 @@
     "@vue/tsconfig": "^0.7.0",
     "@vueuse/core": "^13.1.0",
     "comment-mark": "^2.0.1",
-    "echarts": "^5.5.1",
+    "echarts": "^5.6.0",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "esbuild-wasm": "^0.23.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 192fa13..64e3b65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,14 +39,14 @@ importers:
         specifier: ^2.0.1
         version: 2.0.1
       echarts:
-        specifier: ^5.5.1
-        version: 5.5.1
+        specifier: ^5.6.0
+        version: 5.6.0
       echarts-gl:
         specifier: ^2.0.9
-        version: 2.0.9(echarts@5.5.1)
+        version: 2.0.9(echarts@5.6.0)
       echarts-liquidfill:
         specifier: ^3.1.0
-        version: 3.1.0(echarts@5.5.1)
+        version: 3.1.0(echarts@5.6.0)
       esbuild-wasm:
         specifier: ^0.23.0
         version: 0.23.0
@@ -820,8 +820,8 @@ packages:
     peerDependencies:
       echarts: ^5.0.1
 
-  echarts@5.5.1:
-    resolution: {integrity: sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==}
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
 
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1511,6 +1511,9 @@ packages:
   zrender@5.6.0:
     resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
 
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
 snapshots:
 
   '@aashutoshrathi/word-wrap@1.2.6': {}
@@ -2134,20 +2137,20 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
-  echarts-gl@2.0.9(echarts@5.5.1):
+  echarts-gl@2.0.9(echarts@5.6.0):
     dependencies:
       claygl: 1.3.0
-      echarts: 5.5.1
+      echarts: 5.6.0
       zrender: 5.6.0
 
-  echarts-liquidfill@3.1.0(echarts@5.5.1):
+  echarts-liquidfill@3.1.0(echarts@5.6.0):
     dependencies:
-      echarts: 5.5.1
+      echarts: 5.6.0
 
-  echarts@5.5.1:
+  echarts@5.6.0:
     dependencies:
       tslib: 2.3.0
-      zrender: 5.6.0
+      zrender: 5.6.1
 
   emoji-regex@8.0.0: {}
 
@@ -2819,3 +2822,7 @@ snapshots:
   zrender@5.6.0:
     dependencies:
       tslib: 2.3.0
+
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 66e2646..743f7a9 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -24,7 +24,7 @@ import {
 import { isOn, omitOn, toValue } from "./utils";
 import { register, TAG_NAME } from "./wc";
 
-import type { PropType, InjectionKey } from "vue";
+import type { PropType, InjectionKey, SlotsType } from "vue";
 import type {
   EChartsType,
   SetOptionType,
@@ -40,6 +40,7 @@ import type {
 import type { EChartsElement } from "./wc";
 
 import "./style.css";
+import { useTooltip } from "./composables/tooltip";
 
 const wcRegistered = register();
 
@@ -64,8 +65,11 @@ export default defineComponent({
     ...loadingProps,
   },
   emits: {} as unknown as Emits,
+  slots: Object as SlotsType<
+    Record<"tooltip" | `tooltip:${string}`, { params: any }>
+  >,
   inheritAttrs: false,
-  setup(props, { attrs, expose }) {
+  setup(props, { attrs, expose, slots }) {
     const root = shallowRef<EChartsElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
@@ -174,7 +178,16 @@ export default defineComponent({
       function commit() {
         const opt = option || realOption.value;
         if (opt) {
-          instance.setOption(opt, realUpdateOptions.value);
+          const tooltipOption = createTooltipOption();
+          instance.setOption(opt, {
+            ...realUpdateOptions.value,
+            lazyUpdate: true,
+          });
+          instance.setOption(tooltipOption, {
+            ...realUpdateOptions.value,
+            notMerge: false,
+            silent: true,
+          });
         }
       }
 
@@ -204,7 +217,16 @@ export default defineComponent({
       if (!chart.value) {
         init(option);
       } else {
-        chart.value.setOption(option, updateOptions || {});
+        const tooltipOption = createTooltipOption();
+        chart.value.setOption(option, {
+          ...(updateOptions || {}),
+          lazyUpdate: true,
+        });
+        chart.value.setOption(tooltipOption, {
+          ...(updateOptions || {}),
+          notMerge: false,
+          silent: true,
+        });
       }
     };
 
@@ -234,11 +256,18 @@ export default defineComponent({
               if (!chart.value) {
                 init();
               } else {
+                const tooltipOption = createTooltipOption();
                 chart.value.setOption(option, {
                   // mutating `option` will lead to `notMerge: false` and
                   // replacing it with new reference will lead to `notMerge: true`
                   notMerge: option !== oldOption,
                   ...realUpdateOptions.value,
+                  lazyUpdate: true,
+                });
+                chart.value.setOption(tooltipOption, {
+                  ...realUpdateOptions.value,
+                  notMerge: false,
+                  silent: true,
                 });
               }
             },
@@ -274,6 +303,21 @@ export default defineComponent({
 
     useAutoresize(chart, autoresize, root);
 
+    const { teleportedSlots, createTooltipOption } = useTooltip(slots, () => {
+      if (!manualUpdate.value && props.option && chart.value) {
+        const tooltipOption = createTooltipOption();
+        chart.value.setOption(props.option, {
+          ...realUpdateOptions.value,
+          lazyUpdate: true,
+        });
+        chart.value.setOption(tooltipOption, {
+          ...realUpdateOptions.value,
+          notMerge: false,
+          silent: true,
+        });
+      }
+    });
+
     onMounted(() => {
       init();
     });
@@ -302,11 +346,15 @@ export default defineComponent({
     // This type casting ensures TypeScript correctly types the exposed members
     // that will be available when using this component.
     return (() =>
-      h(TAG_NAME, {
-        ...nonEventAttrs.value,
-        ...nativeListeners,
-        ref: root,
-        class: ["echarts", ...(nonEventAttrs.value.class || [])],
-      })) as unknown as typeof exposed & PublicMethods;
+      h(
+        TAG_NAME,
+        {
+          ...nonEventAttrs.value,
+          ...nativeListeners,
+          ref: root,
+          class: ["echarts", nonEventAttrs.value.class],
+        },
+        teleportedSlots(),
+      )) as unknown as typeof exposed & PublicMethods;
   },
 });
diff --git a/src/composables/tooltip.ts b/src/composables/tooltip.ts
new file mode 100644
index 0000000..ed513be
--- /dev/null
+++ b/src/composables/tooltip.ts
@@ -0,0 +1,106 @@
+import {
+  h,
+  Teleport,
+  onUpdated,
+  onUnmounted,
+  shallowReactive,
+  type Slots,
+} from "vue";
+import { parseProperties } from "../utils";
+import type { Option } from "src/types";
+
+function isTooltipSlot(key: string) {
+  return key === "tooltip" || key.startsWith("tooltip:");
+}
+
+export function useTooltip(slots: Slots, onSlotsChange?: () => void) {
+  const detachedRoot = document?.createElement("div");
+  const containers = shallowReactive<Record<string, HTMLElement>>({});
+  const initialized = shallowReactive<Record<string, boolean>>({});
+  const params = shallowReactive<Record<string, any>>({});
+
+  // Teleport the tooltip slots to a detached root
+  const teleportedSlots = () => {
+    return h(
+      Teleport as any,
+      { to: detachedRoot },
+      Object.entries(slots)
+        .filter(([key]) => isTooltipSlot(key))
+        .map(([key, slot]) => {
+          const slotContent = initialized[key]
+            ? slot?.({ params: params[key] })
+            : undefined;
+          return h(
+            "div",
+            { ref: (el) => (containers[key] = el as HTMLElement), name: key },
+            slotContent,
+          );
+        }),
+    );
+  };
+
+  // Create a minimal option with component rendered tooltip formatter
+  function createTooltipOption(): Option {
+    const option: any = {};
+
+    Object.keys(slots)
+      .filter((key) => isTooltipSlot(key))
+      .forEach((key) => {
+        const path =
+          key === "tooltip" ? [] : parseProperties(key.replace("tooltip:", ""));
+        let current = option;
+        path.forEach((k, index, arr) => {
+          if (!(k in current)) {
+            // If the next key is a number, create an array, otherwise create an object
+            current[k] = isNaN(Number(arr[index + 1])) ? {} : [];
+            // fill the non-existent elements with empty objects
+            if (Array.isArray(current) && !isNaN(Number(k))) {
+              for (let i = 0; i < Number(k); i++) {
+                if (current[i] == undefined) {
+                  current[i] = {};
+                }
+              }
+            }
+          }
+          current = current[k];
+        });
+        current.tooltip = {
+          formatter(p: any) {
+            initialized[key] = true;
+            params[key] = p;
+            return containers[key];
+          },
+        };
+      });
+
+    return option;
+  }
+
+  // `slots` is not reactive and cannot be watched
+  // so we need to watch it manually
+  let slotNames = Object.keys(slots).filter((key) => isTooltipSlot(key));
+  onUpdated(() => {
+    const newSlotNames = Object.keys(slots).filter((key) => isTooltipSlot(key));
+    if (newSlotNames.join() !== slotNames.join()) {
+      // Clean up params and initialized for removed slots
+      slotNames.forEach((key) => {
+        if (!(key in slots)) {
+          delete params[key];
+          delete initialized[key];
+          delete containers[key];
+        }
+      });
+      slotNames = newSlotNames;
+      onSlotsChange?.();
+    }
+  });
+
+  onUnmounted(() => {
+    detachedRoot?.remove();
+  });
+
+  return {
+    teleportedSlots,
+    createTooltipOption,
+  };
+}
diff --git a/src/utils.ts b/src/utils.ts
index 6dec3f5..bdb01cb 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -29,3 +29,9 @@ const isFunction = (val: unknown): val is Function => typeof val === "function";
 export function toValue<T>(source: MaybeRefOrGetter<T>): T {
   return isFunction(source) ? source() : unref(source);
 }
+
+export function parseProperties(path: string) {
+  // Convert bracket notation to dot notation and split the path
+  // "[2].series[0].data" -> ["2", "series", "0", "data"]
+  return path.replace(/\[(\w+)\]/g, ".$1").split(".");
+}