From e1ba80eebe18375e4a2d6f69d845bd418ee27d94 Mon Sep 17 00:00:00 2001
From: Chan Yu Cheng <77204346+yucheng11122017@users.noreply.github.com>
Date: Sun, 25 Feb 2024 20:52:35 +0800
Subject: [PATCH] Disable popover in a-point when there is no header or content
 (#2436)

---
 .../__snapshots__/Annotation.spec.js.snap     | 22 +++++++++----------
 .../src/annotations/AnnotatePoint.vue         |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap
index 6f20e14a51..318783c4b1 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Annotation.spec.js.snap
@@ -119,7 +119,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -153,7 +153,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 60px; height: 60px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 60px; height: 60px; cursor: default;"
                 />
                  
                 <div
@@ -187,7 +187,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -221,7 +221,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: red; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: red; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -255,7 +255,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.7; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.7; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -289,7 +289,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -323,7 +323,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: black; opacity: 1; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: black; opacity: 1; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -357,7 +357,7 @@ exports[`Annotation with different visual annotation points 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -407,7 +407,7 @@ exports[`Annotation with markdown in header, content and label 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -441,7 +441,7 @@ exports[`Annotation with markdown in header, content and label 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
@@ -475,7 +475,7 @@ exports[`Annotation with markdown in header, content and label 1`] = `
               >
                 <button
                   class="hover-point"
-                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: pointer;"
+                  style="background-color: green; opacity: 0.3; width: 40px; height: 40px; cursor: default;"
                 />
                  
                 <div
diff --git a/packages/vue-components/src/annotations/AnnotatePoint.vue b/packages/vue-components/src/annotations/AnnotatePoint.vue
index 34be1b3b28..62403dabf4 100644
--- a/packages/vue-components/src/annotations/AnnotatePoint.vue
+++ b/packages/vue-components/src/annotations/AnnotatePoint.vue
@@ -195,7 +195,7 @@ export default {
       return this.legend === 'bottom' || this.legend === 'both';
     },
     hasPopover() {
-      return this.legend === 'popover' || this.legend === 'both';
+      return (this.hasContent || this.hasHeader) && (this.legend === 'popover' || this.legend === 'both');
     },
     computedBottomHeader() {
       if (this.label !== '' && this.header === '') {