Make tooltips headless in customFormat mode

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.6",
+  "version": "2.0.7",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3773,5 +3773,11 @@ const moleculeConfig = ref({
 .btn--orange:hover {
     background: linear-gradient(to top left, #ff6400, #ff6400AA);
 }
+</style>
+
+<style>
+.vue-data-ui-custom-tooltip {
+  background: red;
+}
 
 </style>

src/App.vue

@@ -24,6 +24,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    isCustom: {
+        type: Boolean,
+        default: false,
+    }
 });
 
 const tooltip = ref(null)
@@ -44,9 +48,9 @@ const position = computed(() => {
     <div
         ref="tooltip"
         data-cy="tooltip"
-        class="vue-data-ui-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;background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`"
+        :style="`top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`}`"
     >
         <slot/>
         <div v-html="content"/>
@@ -63,4 +67,11 @@ const position = computed(() => {
     padding:12px;
     z-index:2;
 }
+</style>
+
+<style>
+.vue-data-ui-custom-tooltip {
+    position: fixed;
+    z-index: 2;
+}
 </style>

src/atoms/Tooltip.vue

@@ -610,6 +610,7 @@ defineExpose({
             :color="agePyramidConfig.style.tooltip.color"
             :parent="agePyramid"
             :content="tooltipContent"
+            :isCustom="!!agePyramidConfig.style.tooltip.customFormat"
         />
 
         <!-- DATA TABLE -->

src/components/vue-ui-age-pyramid.vue

@@ -615,6 +615,7 @@ defineExpose({
             :color="candlestickConfig.style.tooltip.color"
             :parent="candlestickChart"
             :content="tooltipContent"
+            :isCustom="!!candlestickConfig.style.tooltip.customFormat"
         />
 
         <!-- DATA TABLE -->

src/components/vue-ui-candlestick.vue

@@ -638,6 +638,7 @@ defineExpose({
             :color="donutConfig.style.chart.tooltip.color"
             :parent="donutChart"
             :content="tooltipContent"
+            :isCustom="!!donutConfig.style.chart.tooltip.customFormat"
         />
 
         <!-- DATA TABLE -->

src/components/vue-ui-donut.vue

@@ -529,6 +529,7 @@ defineExpose({
             :color="heatmapConfig.style.tooltip.color"
             :parent="heatmapChart"
             :content="tooltipContent"
+            :isCustom="!!heatmapConfig.style.tooltip.customFormat"
         />
 
         <!-- DATA TABLE -->

src/components/vue-ui-heatmap.vue

@@ -555,6 +555,7 @@ defineExpose({
             :color="moleculeConfig.style.chart.tooltip.color"
             :parent="moleculeChart"
             :content="tooltipContent"
+            :isCustom="!!moleculeConfig.style.chart.tooltip.customFormat"
         />
         <div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable">
             <DataTable

src/components/vue-ui-molecule.vue

@@ -930,6 +930,7 @@ defineExpose({
             :color="quadrantConfig.style.chart.tooltip.color"
             :parent="quadrantChart"
             :content="tooltipContent"
+            :isCustom="!!quadrantConfig.style.chart.tooltip.customFormat"
         >
             <svg height="14" width="14" viewBox="0 0 20 20" v-if="quadrantConfig.style.chart.tooltip.showShape">
                 <Shape

src/components/vue-ui-quadrant.vue

@@ -297,7 +297,6 @@ function useTooltip(apex, i) {
     let html = "";
 
     const customFormat = radarConfig.value.style.chart.tooltip.customFormat;
-    console.log({customFormat})
 
     if (customFormat && typeof customFormat === 'function' && typeof customFormat({
             seriesIndex: i,
@@ -611,6 +610,7 @@ defineExpose({
             :color="radarConfig.style.chart.tooltip.color"
             :parent="radarChart"
             :content="tooltipContent"
+            :isCustom="!!radarConfig.style.chart.tooltip.customFormat"
         >
             <template #content-after>
                 <div style="max-width: 200px;margin:0 auto">

src/components/vue-ui-radar.vue

@@ -537,6 +537,7 @@ defineExpose({
       :color="ringsConfig.style.chart.tooltip.color"
       :parent="ringsChart"
       :content="tooltipContent"
+      :isCustom="!!ringsConfig.style.chart.tooltip.customFormat"
     />
 
     <!-- DATA TABLE -->

src/components/vue-ui-rings.vue

@@ -657,6 +657,7 @@ defineExpose({
             :color="scatterConfig.style.tooltip.color"
             :parent="scatterChart"
             :content="tooltipContent"
+            :isCustom="!!scatterConfig.style.tooltip.customFormat"
         >
             <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;">

src/components/vue-ui-scatter.vue

@@ -676,6 +676,7 @@ defineExpose({
             :color="verticalBarConfig.style.chart.tooltip.color"
             :parent="verticalBarChart"
             :content="tooltipContent"
+            :isCustom="!!verticalBarConfig.style.chart.tooltip.customFormat"
         />
 
         <!-- DATA TABLE -->

src/components/vue-ui-vertical-bar.vue

@@ -603,6 +603,7 @@ defineExpose({
             :color="waffleConfig.style.chart.tooltip.color"
             :parent="waffleChart"
             :content="tooltipContent"
+            :isCustom="!!waffleConfig.style.chart.tooltip.customFormat"
         />
 
         <!-- DATA TABLE -->

src/components/vue-ui-waffle.vue

@@ -647,6 +647,7 @@
             :color="chartConfig.chart.tooltip.color"
             :parent="$refs.chart"
             :content="tooltipContent"
+            :isCustom="!!chartConfig.chart.tooltip.customFormat"
         />
 
         <!-- DATA TABLE -->