Make tooltips headless in customFormat mode

graphieros · Mar 7, 2024 · b940cac · b940cac
1 parent f4df6f4
commit b940cac
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.7",
+  "version": "2.0.8",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git 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
@@ -50,15 +50,15 @@ 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;${isCustom ? '' : `background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`}`"
+        :style="`top:${position.top}px;left:${position.left}px;${props.isCustom ? '' : `background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`}`"
     >
         <slot/>
         <div v-html="content"/>
         <slot name="content-after"/>
     </div>
 </template>
 
-<style scoped>
+<style>
 .vue-data-ui-tooltip {
     border: 1px solid #e1e5e8;
     border-radius: 4px;
@@ -67,9 +67,6 @@ const position = computed(() => {
     padding:12px;
     z-index:2;
 }
-</style>
-
-<style>
 .vue-data-ui-custom-tooltip {
     position: fixed;
     z-index: 2;