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