From 248de3dd8a7d68633c08e8f7fb78cf3452c55e7d Mon Sep 17 00:00:00 2001
From: mantou132 <709922234@qq.com>
Date: Wed, 29 Nov 2023 00:10:03 +0800
Subject: [PATCH] [duoyun-ui] Improve tooltip position

---
 .../duoyun-ui/docs/en/02-elements/tooltip.md  | 24 ++++---------------
 .../duoyun-ui/docs/zh/02-elements/tooltip.md  | 24 ++++---------------
 packages/duoyun-ui/src/elements/popover.ts    | 22 ++++++++++-------
 3 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/packages/duoyun-ui/docs/en/02-elements/tooltip.md b/packages/duoyun-ui/docs/en/02-elements/tooltip.md
index 44717a29..1a719810 100644
--- a/packages/duoyun-ui/docs/en/02-elements/tooltip.md
+++ b/packages/duoyun-ui/docs/en/02-elements/tooltip.md
@@ -2,25 +2,11 @@
 
 ## Example
 
-<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
-
-```ts
-import { render, html } from '@mantou/gem';
-
-import 'duoyun-ui/elements/tooltip';
-import 'duoyun-ui/elements/button';
-
-render(
-  html`
-    <dy-tooltip .content=${new Date().toLocaleString()}>
-      <dy-button>Current Time</dy-button>
-    </dy-tooltip>
-  `,
-  document.getElementById('root'),
-);
-```
-
-</gbp-sandpack>
+<gbp-example
+  name="dy-tooltip"
+  html="<button>x</button>"
+  props='{"content":"Tooltip text", "position": "topRight", "unreachable": true}'
+  src="https://jspm.dev/duoyun-ui/elements/tooltip"></gbp-example>
 
 ## API
 
diff --git a/packages/duoyun-ui/docs/zh/02-elements/tooltip.md b/packages/duoyun-ui/docs/zh/02-elements/tooltip.md
index f12e4fbe..1a719810 100644
--- a/packages/duoyun-ui/docs/zh/02-elements/tooltip.md
+++ b/packages/duoyun-ui/docs/zh/02-elements/tooltip.md
@@ -2,25 +2,11 @@
 
 ## Example
 
-<gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
-
-```ts
-import { render, html } from '@mantou/gem';
-
-import 'duoyun-ui/elements/tooltip';
-import 'duoyun-ui/elements/button';
-
-render(
-  html`
-    <dy-tooltip .content=${new Date().toLocaleString()}>
-      <dy-button>当前时间</dy-button>
-    </dy-tooltip>
-  `,
-  document.getElementById('root'),
-);
-```
-
-</gbp-sandpack>
+<gbp-example
+  name="dy-tooltip"
+  html="<button>x</button>"
+  props='{"content":"Tooltip text", "position": "topRight", "unreachable": true}'
+  src="https://jspm.dev/duoyun-ui/elements/tooltip"></gbp-example>
 
 ## API
 
diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts
index fe7a9d19..6616b66b 100644
--- a/packages/duoyun-ui/src/elements/popover.ts
+++ b/packages/duoyun-ui/src/elements/popover.ts
@@ -214,50 +214,56 @@ export class DuoyunPopoverElement extends GemElement<PopoverState> {
 
   #genStyle = (position: Position): StyleObject => {
     const { top, left, right, bottom } = this.state;
+    const widthHalf = (right - left) / 2;
+    const heightHalf = (top - bottom) / 2;
     switch (position) {
       case 'top':
         return {
-          left: `${left + (right - left) / 2}px`,
+          left: `${left + widthHalf}px`,
           bottom: `${innerHeight - top + offset}px`,
           transform: `translateX(-50%)`,
         };
       case 'bottom':
         return {
-          left: `${left + (right - left) / 2}px`,
+          left: `${left + widthHalf}px`,
           top: `${bottom + offset}px`,
           transform: `translateX(-50%)`,
         };
       case 'left':
         return {
           right: `${innerWidth - left + offset}px`,
-          top: `${top + (bottom - top) / 2}px`,
+          top: `${top - heightHalf}px`,
           transform: `translateY(-50%)`,
         };
       case 'right':
         return {
           left: `${right + offset}px`,
-          top: `${top + (bottom - top) / 2}px`,
+          top: `${top - heightHalf}px`,
           transform: `translateY(-50%)`,
         };
       case 'bottomRight':
         return {
           right: `${innerWidth - right}px`,
           top: `${bottom + offset}px`,
+          '--arrow-offset': `min(2em, ${widthHalf}px)`,
         };
       case 'topRight':
         return {
           right: `${innerWidth - right}px`,
           bottom: `${innerHeight - top + offset}px`,
+          '--arrow-offset': `min(2em, ${widthHalf}px)`,
         };
       case 'bottomLeft':
         return {
           left: `${left}px`,
           top: `${bottom + offset}px`,
+          '--arrow-offset': `min(2em, ${widthHalf}px)`,
         };
       case 'topLeft':
         return {
           left: `${left}px`,
           bottom: `${innerHeight - top + offset}px`,
+          '--arrow-offset': `min(2em, ${widthHalf}px)`,
         };
     }
   };
@@ -402,11 +408,11 @@ const ghostStyle = createCSSSheet(css`
     transform: translateX(-50%);
   }
   :host([data-position='topRight'])::before {
-    right: 2em;
+    right: var(--arrow-offset);
     transform: translateX(50%);
   }
   :host([data-position='topLeft'])::before {
-    left: 2em;
+    left: var(--arrow-offset);
     transform: translateX(-50%);
   }
   :host([data-position='bottom'])::before,
@@ -421,11 +427,11 @@ const ghostStyle = createCSSSheet(css`
     transform: translateX(-50%);
   }
   :host([data-position='bottomRight'])::before {
-    right: 2em;
+    right: var(--arrow-offset);
     transform: translateX(50%);
   }
   :host([data-position='bottomLeft'])::before {
-    left: 2em;
+    left: var(--arrow-offset);
     transform: translateX(-50%);
   }
   :host([data-position='left'])::before {