From def06430cf1ab1bf23230a765ac2f0a4c21f7e77 Mon Sep 17 00:00:00 2001
From: GuoJikun <guojikun486546@163.com>
Date: Tue, 25 Oct 2022 16:21:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90tooltip=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ivy-tooltip/ivy-tooltip.css    | 229 ++++++++++++++----
 .../components/ivy-tooltip/ivy-tooltip.tsx    |   4 +-
 components/src/index.html                     |  56 ++++-
 3 files changed, 232 insertions(+), 57 deletions(-)

diff --git a/components/src/components/ivy-tooltip/ivy-tooltip.css b/components/src/components/ivy-tooltip/ivy-tooltip.css
index dadca77..e159f05 100644
--- a/components/src/components/ivy-tooltip/ivy-tooltip.css
+++ b/components/src/components/ivy-tooltip/ivy-tooltip.css
@@ -2,81 +2,216 @@
   display: inline-block;
   position: relative;
 }
-
+.ivy-tooltip-ref {
+  display: inline-flex;
+}
 .ivy-tooltip-content {
-  background: #333;
-  color: white;
-  font-weight: bold;
-  padding: 4px 8px;
-  font-size: 13px;
-  border-radius: 4px;
   display: none;
   position: absolute;
+  transition: opacity 0.3s;
+  opacity: 0;
   z-index: 10;
 }
-
-.ivy-tooltip-arrow,
-.ivy-tooltip-arrow::before {
+.ivy-tooltip-arrow {
   position: absolute;
   width: 8px;
   height: 8px;
-  background: inherit;
 }
-
-.ivy-tooltip-arrow {
-  visibility: hidden;
+.ivy-tooltip-arrow::before,
+.ivy-tooltip-arrow::after {
+  content: '';
+  display: block;
+  position: absolute;
+  height: 0;
+  width: 0;
+  border: 6px solid transparent;
+}
+.ivy-tooltip-arrow::after {
+  border-width: 5px;
 }
 
-.ivy-tooltip-arrow::before {
-  visibility: visible;
-  content: '';
-  transform: rotate(45deg);
+.ivy-tooltip-text {
+  padding: 8px 14px;
+  word-break: keep-all;
+  white-space: nowrap;
+  border: 1px solid var(--ivy-border-color, #dcdfe6);
+  border-radius: var(--ivy-border-radius, 4px);
+  background-color: #fff;
+}
+:host([placement|='top']) .ivy-tooltip-content {
+  bottom: calc(100% + 8px);
+}
+:host([placement='top']) .ivy-tooltip-content {
+  left: 50%;
+  transform: translateX(-50%);
+}
+:host([placement='top-start']) .ivy-tooltip-content {
+  left: 0;
+}
+:host([placement='top-end']) .ivy-tooltip-content {
+  right: 0;
+}
+:host([placement|='top']) .ivy-tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -6px;
+}
+:host([placement|='top']) .ivy-tooltip-arrow::before {
+  top: 7px;
+  border-top-color: var(--ivy-border-color, #dcdfe6);
+}
+:host([placement|='top']) .ivy-tooltip-arrow::after {
+  left: 1px;
+  top: 7px;
+  border-top-color: #ffffff;
 }
 
-:host([placement^='top']) .ivy-tooltip-content > .ivy-tooltip-arrow {
-  bottom: -4px;
+:host([theme='dark'][placement|='top']) .ivy-tooltip-arrow::before {
+  border-top-color: rgb(70, 76, 91);
+}
+:host([theme='dark'][placement|='top']) .ivy-tooltip-arrow::after {
+  border-top-color: rgb(70, 76, 91);
 }
-:host([placement='top-end']) .ivy-tooltip-content > .ivy-tooltip-arrow {
-  right: 8px;
+:host([theme='dark'][placement|='top']) .ivy-tooltip-text {
+  border: 1px solid rgb(70, 76, 91);
+  background-color: rgb(70, 76, 91);
+  color: white;
 }
 
-:host([placement^='bottom']) .ivy-tooltip-content > .ivy-tooltip-arrow {
+:host([placement|='bottom']) .ivy-tooltip-content {
+  top: calc(100% + 8px);
+}
+:host([placement='bottom']) .ivy-tooltip-content {
+  left: 50%;
+  transform: translateX(-50%);
+}
+:host([placement='bottom-start']) .ivy-tooltip-content {
+  left: 0;
+}
+:host([placement='bottom-end']) .ivy-tooltip-content {
+  right: 0;
+}
+:host([placement|='bottom']) .ivy-tooltip-arrow {
   top: -4px;
+  left: 50%;
+  margin-left: -6px;
 }
-
-:host([placement^='left']) .ivy-tooltip-content > .ivy-tooltip-arrow {
-  right: -4px;
+:host([placement|='bottom']) .ivy-tooltip-arrow::before {
+  top: -7px;
+  border-color: transparent transparent var(--ivy-border-color, #dcdfe6) transparent;
 }
-
-:host([placement^='right']) .ivy-tooltip-content > .ivy-tooltip-arrow {
-  left: -4px;
+:host([placement|='bottom']) .ivy-tooltip-arrow::after {
+  left: 1px;
+  top: -5px;
+  border-color: transparent transparent #ffffff transparent;
 }
-
-:host([show]) .ivy-tooltip-content {
-  display: block;
+:host([theme='dark'][placement|='bottom']) .ivy-tooltip-arrow::before {
+  border-bottom-color: rgb(70, 76, 91);
+}
+:host([theme='dark'][placement|='bottom']) .ivy-tooltip-arrow::after {
+  border-bottom-color: rgb(70, 76, 91);
+}
+:host([theme='dark'][placement|='bottom']) .ivy-tooltip-text {
+  border: 1px solid rgb(70, 76, 91);
+  background-color: rgb(70, 76, 91);
+  color: white;
+}
+:host([placement='top-start']) .ivy-tooltip-arrow,
+:host([placement='bottom-start']) .ivy-tooltip-arrow {
+  left: 20px;
+}
+:host([placement='top-end']) .ivy-tooltip-arrow,
+:host([placement='bottom-end']) .ivy-tooltip-arrow {
+  left: calc(100% - 20px);
 }
 
-:host([placement^='top']) .ivy-tooltip-content {
+:host([placement|='left']) .ivy-tooltip-content {
+  right: calc(100% + 8px);
+}
+:host([placement='left']) .ivy-tooltip-content {
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host([placement='left-start']) .ivy-tooltip-content {
   top: 0;
-  transform: translateY(calc(-100% - 10px));
 }
-:host([placement='top-end']) .ivy-tooltip-content {
-  right: 0;
+:host([placement='left-end']) .ivy-tooltip-content {
+  bottom: 0;
 }
-
-:host([placement^='bottom']) .ivy-tooltip-content {
+:host([placement|='left']) .ivy-tooltip-arrow {
+  right: -4px;
+  top: 50%;
+  margin-top: -6px;
+}
+:host([placement|='left']) .ivy-tooltip-arrow::before {
+  right: -7px;
+  border-color: transparent transparent transparent var(--ivy-border-color, #dcdfe6);
+}
+:host([placement|='left']) .ivy-tooltip-arrow::after {
+  top: 1px;
+  right: -5px;
+  border-color: transparent transparent transparent #ffffff;
+}
+:host([theme='dark'][placement|='left']) .ivy-tooltip-arrow::before {
+  border-left-color: rgb(70, 76, 91);
+}
+:host([theme='dark'][placement|='left']) .ivy-tooltip-arrow::after {
+  border-left-color: rgb(70, 76, 91);
+}
+:host([theme='dark'][placement|='left']) .ivy-tooltip-text {
+  border: 1px solid rgb(70, 76, 91);
+  background-color: rgb(70, 76, 91);
+  color: white;
+}
+:host([placement|='right']) .ivy-tooltip-content {
+  left: calc(100% + 8px);
+}
+:host([placement='right']) .ivy-tooltip-content {
+  top: 50%;
+  transform: translateY(-50%);
+}
+:host([placement='right-start']) .ivy-tooltip-content {
+  top: 0;
+}
+:host([placement='right-end']) .ivy-tooltip-content {
   bottom: 0;
-  transform: translateY(calc(100% + 10px));
+}
+:host([placement|='right']) .ivy-tooltip-arrow {
+  left: -4px;
+  top: 50%;
+  margin-top: -6px;
+}
+:host([placement|='right']) .ivy-tooltip-arrow::before {
+  left: -7px;
+  border-color: transparent var(--ivy-border-color, #dcdfe6) transparent transparent;
+}
+:host([placement|='right']) .ivy-tooltip-arrow::after {
+  top: 1px;
+  left: -5px;
+  border-color: transparent #ffffff transparent transparent;
+}
+:host([placement='left-start']) .ivy-tooltip-arrow,
+:host([placement='right-start']) .ivy-tooltip-arrow {
+  top: 12px;
+}
+:host([placement='left-end']) .ivy-tooltip-arrow,
+:host([placement='right-end']) .ivy-tooltip-arrow {
+  top: calc(100% - 12px);
 }
 
-:host([placement^='left']) .ivy-tooltip-content {
-  top: 0;
-  left: 0;
-  transform: translateX(calc(-100% - 10px));
+:host([theme='dark'][placement|='right']) .ivy-tooltip-arrow::before {
+  border-right-color: rgb(70, 76, 91);
+}
+:host([theme='dark'][placement|='right']) .ivy-tooltip-arrow::after {
+  border-right-color: rgb(70, 76, 91);
+}
+:host([theme='dark'][placement|='right']) .ivy-tooltip-text {
+  border: 1px solid rgb(70, 76, 91);
+  background-color: rgb(70, 76, 91);
+  color: white;
 }
 
-:host([placement^='right']) .ivy-tooltip-content {
-  top: 0;
-  right: 0;
-  transform: translateX(calc(100% + 10px));
+:host([show]) .ivy-tooltip-content {
+  display: block;
+  opacity: 1;
 }
diff --git a/components/src/components/ivy-tooltip/ivy-tooltip.tsx b/components/src/components/ivy-tooltip/ivy-tooltip.tsx
index ccdf196..dd4c7e2 100644
--- a/components/src/components/ivy-tooltip/ivy-tooltip.tsx
+++ b/components/src/components/ivy-tooltip/ivy-tooltip.tsx
@@ -77,11 +77,11 @@ export class IvyTooltip {
   render() {
     return (
       <Host show={this.visible}>
-        <div class="ivy-tooltip-ref" onMouseEnter={this.show.bind(this)} onFocus={this.show.bind(this)} onMouseLeave={this.hide.bind(this)} onBlur={this.hide.bind(this)}>
+        <div class="ivy-tooltip-ref" onMouseEnter={this.show.bind(this)} onMouseOut={this.hide.bind(this)}>
           <slot></slot>
         </div>
         <div class="ivy-tooltip-content">
-          <div class="ivy-tooltip-arrow" data-popper-arrow></div>
+          <div class="ivy-tooltip-arrow"></div>
           <div class="ivy-tooltip-text">
             <slot name="content">{this.content}</slot>
           </div>
diff --git a/components/src/index.html b/components/src/index.html
index 28a25c7..303a13a 100644
--- a/components/src/index.html
+++ b/components/src/index.html
@@ -29,15 +29,15 @@
       margin: 0;
     }
 
-    .ivy-margin-top {
+    .margin-top {
       margin-top: 12px;
     }
 
-    .ivy-margin-left {
+    .-margin-left {
       margin-left: 12px;
     }
 
-    .ivy-margin-left-large {
+    .margin-left-large {
       margin-left: 12px;
     }
 
@@ -50,12 +50,52 @@
 </head>
 
 <body>
-  <div style="height: 120vh"></div>
   <div style="min-height: 200px">
-    <ivy-image src="https://xx.nonewall.com:12443/ydimage/assets/2022-08/1557544636157825024.png">321321321
-    </ivy-image>
-    <ivy-image src="https://xx.nonewall.com:12443/ydimage/assets/2022-08/1557544636157825024.png" lazy>321321321
-    </ivy-image>
+
+  </div>
+  <div>
+    <ivy-tooltip content="Tooltip 文字提示" placement="top-start" theme="dark">
+      <ivy-tag>top start</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="top" theme="dark">
+      <ivy-tag>top</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="top-end" theme="dark">
+      <ivy-tag>top end</ivy-tag>
+    </ivy-tooltip>
+  </div>
+  <div class="margin-top">
+    <ivy-tooltip content="Tooltip 文字提示" placement="bottom-start" theme="dark">
+      <ivy-tag>bottom start</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="bottom" theme="dark">
+      <ivy-tag>bottom</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="bottom-end" theme="dark">
+      <ivy-tag>bottom end</ivy-tag>
+    </ivy-tooltip>
+  </div>
+  <div class="margin-top">
+    <ivy-tooltip content="Tooltip 文字提示" placement="left-start" theme="dark">
+      <ivy-tag>left start</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="left" theme="dark">
+      <ivy-tag>left</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="left-end" theme="dark">
+      <ivy-tag>left end</ivy-tag>
+    </ivy-tooltip>
+  </div>
+  <div class="margin-top">
+    <ivy-tooltip content="Tooltip 文字提示" placement="right-start" theme="dark">
+      <ivy-tag>right start</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="right" theme="dark">
+      <ivy-tag>right</ivy-tag>
+    </ivy-tooltip>
+    <ivy-tooltip content="Tooltip 文字提示" placement="right-end" theme="dark">
+      <ivy-tag>right end</ivy-tag>
+    </ivy-tooltip>
   </div>
 
 
-- 
GitLab