diff --git a/package-lock.json b/package-lock.json
index c063f897..cfcc4f32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "2.0.7",
+      "version": "2.0.8",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 015ff882..180b6f32 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.8",
+  "version": "2.0.9",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index 13831b69..d65f85ae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2319,12 +2319,12 @@ const donutConfig = ref({
 
 const xyConfig = ref({
   chart: {
-    // tooltip: {
-    //   customFormat: ({ seriesIndex, datapoint, series,  bars, lines, plots, config }) => {
-    //     console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
-    //     return 'TEST'
-    //   }
-    // }
+    tooltip: {
+      customFormat: ({ seriesIndex, datapoint, series,  bars, lines, plots, config }) => {
+        console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
+        return 'TEST'
+      }
+    }
   }
 })
 
diff --git a/src/atoms/Tooltip.vue b/src/atoms/Tooltip.vue
index b05e5901..31abcae1 100644
--- a/src/atoms/Tooltip.vue
+++ b/src/atoms/Tooltip.vue
@@ -50,7 +50,7 @@ const position = computed(() => {
         data-cy="tooltip"
         :class="{'vue-data-ui-custom-tooltip' : isCustom, 'vue-data-ui-tooltip': !isCustom}"
         v-if="show"
-        :style="`top:${position.top}px;left:${position.left}px;${props.isCustom ? '' : `background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`}`"
+        :style="`top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${backgroundColor};color:${color};max-width:${maxWidth}`}`"
     >
         <slot/>
         <div v-html="content"/>
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
index 1a42d543..cb82b2fb 100644
--- a/src/components/vue-ui-age-pyramid.vue
+++ b/src/components/vue-ui-age-pyramid.vue
@@ -610,7 +610,7 @@ defineExpose({
             :color="agePyramidConfig.style.tooltip.color"
             :parent="agePyramid"
             :content="tooltipContent"
-            :isCustom="!!agePyramidConfig.style.tooltip.customFormat"
+            :isCustom="agePyramidConfig.style.tooltip.customFormat && typeof agePyramidConfig.style.tooltip.customFormat === 'function'"
         />
 
         <!-- DATA TABLE -->
diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
index 5eed87ef..8ddb9d6e 100644
--- a/src/components/vue-ui-candlestick.vue
+++ b/src/components/vue-ui-candlestick.vue
@@ -615,7 +615,7 @@ defineExpose({
             :color="candlestickConfig.style.tooltip.color"
             :parent="candlestickChart"
             :content="tooltipContent"
-            :isCustom="!!candlestickConfig.style.tooltip.customFormat"
+            :isCustom="candlestickConfig.style.tooltip.customFormat && typeof candlestickConfig.style.tooltip.customFormat === 'function'"
         />
 
         <!-- DATA TABLE -->
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
index 8ece5e23..96eb9c00 100644
--- a/src/components/vue-ui-donut.vue
+++ b/src/components/vue-ui-donut.vue
@@ -638,7 +638,7 @@ defineExpose({
             :color="donutConfig.style.chart.tooltip.color"
             :parent="donutChart"
             :content="tooltipContent"
-            :isCustom="!!donutConfig.style.chart.tooltip.customFormat"
+            :isCustom="donutConfig.style.chart.tooltip.customFormat && typeof donutConfig.style.chart.tooltip.customFormat === 'function'"
         />
 
         <!-- DATA TABLE -->
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
index 08e88919..52512add 100644
--- a/src/components/vue-ui-heatmap.vue
+++ b/src/components/vue-ui-heatmap.vue
@@ -529,7 +529,7 @@ defineExpose({
             :color="heatmapConfig.style.tooltip.color"
             :parent="heatmapChart"
             :content="tooltipContent"
-            :isCustom="!!heatmapConfig.style.tooltip.customFormat"
+            :isCustom="heatmapConfig.style.tooltip.customFormat && typeof heatmapConfig.style.tooltip.customFormat === 'function'"
         />
         
         <!-- DATA TABLE -->
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
index 02079151..12841cac 100644
--- a/src/components/vue-ui-molecule.vue
+++ b/src/components/vue-ui-molecule.vue
@@ -555,7 +555,7 @@ defineExpose({
             :color="moleculeConfig.style.chart.tooltip.color"
             :parent="moleculeChart"
             :content="tooltipContent"
-            :isCustom="!!moleculeConfig.style.chart.tooltip.customFormat"
+            :isCustom="moleculeConfig.style.chart.tooltip.customFormat && typeof moleculeConfig.style.chart.tooltip.customFormat === 'function'"
         />
         <div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable">
             <DataTable
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index 4b43682f..06774c66 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -930,7 +930,7 @@ defineExpose({
             :color="quadrantConfig.style.chart.tooltip.color"
             :parent="quadrantChart"
             :content="tooltipContent"
-            :isCustom="!!quadrantConfig.style.chart.tooltip.customFormat"
+            :isCustom="quadrantConfig.style.chart.tooltip.customFormat && typeof quadrantConfig.style.chart.tooltip.customFormat === 'function'"
         >
             <svg height="14" width="14" viewBox="0 0 20 20" v-if="quadrantConfig.style.chart.tooltip.showShape">
                 <Shape
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
index 92a7bebb..318e4013 100644
--- a/src/components/vue-ui-radar.vue
+++ b/src/components/vue-ui-radar.vue
@@ -610,7 +610,7 @@ defineExpose({
             :color="radarConfig.style.chart.tooltip.color"
             :parent="radarChart"
             :content="tooltipContent"
-            :isCustom="!!radarConfig.style.chart.tooltip.customFormat"
+            :isCustom="radarConfig.style.chart.tooltip.customFormat && typeof radarConfig.style.chart.tooltip.customFormat === 'function'"
         >
             <template #content-after>
                 <div style="max-width: 200px;margin:0 auto">
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
index 9204e916..a8c4e485 100644
--- a/src/components/vue-ui-rings.vue
+++ b/src/components/vue-ui-rings.vue
@@ -537,7 +537,7 @@ defineExpose({
       :color="ringsConfig.style.chart.tooltip.color"
       :parent="ringsChart"
       :content="tooltipContent"
-      :isCustom="!!ringsConfig.style.chart.tooltip.customFormat"
+      :isCustom="ringsConfig.style.chart.tooltip.customFormat && typeof ringsConfig.style.chart.tooltip.customFormat === 'function'"
     />
 
     <!-- DATA TABLE -->
diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
index 35edac91..10342a2b 100644
--- a/src/components/vue-ui-scatter.vue
+++ b/src/components/vue-ui-scatter.vue
@@ -657,7 +657,7 @@ defineExpose({
             :color="scatterConfig.style.tooltip.color"
             :parent="scatterChart"
             :content="tooltipContent"
-            :isCustom="!!scatterConfig.style.tooltip.customFormat"
+            :isCustom="scatterConfig.style.tooltip.customFormat && typeof scatterConfig.style.tooltip.customFormat === 'function'"
         >
             <div style="width: 100%; display: flex; align-items:center;justify-content:center;" v-if="scatterConfig.style.tooltip.showShape">
                 <svg viewBox="0 0 20 20" height="20" width="20" style="overflow: hidden;background:transparent;">
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue
index b3f48377..d47d065b 100644
--- a/src/components/vue-ui-vertical-bar.vue
+++ b/src/components/vue-ui-vertical-bar.vue
@@ -676,7 +676,7 @@ defineExpose({
             :color="verticalBarConfig.style.chart.tooltip.color"
             :parent="verticalBarChart"
             :content="tooltipContent"
-            :isCustom="!!verticalBarConfig.style.chart.tooltip.customFormat"
+            :isCustom="verticalBarConfig.style.chart.tooltip.customFormat && typeof verticalBarConfig.style.chart.tooltip.customFormat === 'function'"
         />
 
         <!-- DATA TABLE -->
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 917a3e40..14b13f79 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -603,7 +603,7 @@ defineExpose({
             :color="waffleConfig.style.chart.tooltip.color"
             :parent="waffleChart"
             :content="tooltipContent"
-            :isCustom="!!waffleConfig.style.chart.tooltip.customFormat"
+            :isCustom="waffleConfig.style.chart.tooltip.customFormat && typeof waffleConfig.style.chart.tooltip.customFormat === 'function'"
         />
 
         <!-- DATA TABLE -->
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index bc41bf73..2edbfd5c 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -647,7 +647,7 @@
             :color="chartConfig.chart.tooltip.color"
             :parent="$refs.chart"
             :content="tooltipContent"
-            :isCustom="!!chartConfig.chart.tooltip.customFormat"
+            :isCustom="chartConfig.chart.tooltip.customFormat && typeof chartConfig.chart.tooltip.customFormat === 'function'"
         />
 
         <!-- DATA TABLE -->