From 5a0ddfe44771245765900b4accd7d3c735facd02 Mon Sep 17 00:00:00 2001
From: sunhao <sunhao@easycorp.ltd>
Date: Wed, 3 Apr 2024 17:05:44 +0800
Subject: [PATCH] + tooltip: add hint to use tooltip with pure css.

---
 lib/tooltip/README.md             | 21 +++++++
 lib/tooltip/src/style/hint.css    | 96 +++++++++++++++++++++++++++++++
 lib/tooltip/src/style/index.ts    |  2 +
 lib/tooltip/src/style/tooltip.css |  2 +-
 lib/tooltip/src/style/vars.css    |  6 ++
 5 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 lib/tooltip/src/style/hint.css
 create mode 100644 lib/tooltip/src/style/vars.css

diff --git a/lib/tooltip/README.md b/lib/tooltip/README.md
index 211589609c..67bb8e1a9a 100755
--- a/lib/tooltip/README.md
+++ b/lib/tooltip/README.md
@@ -2,6 +2,27 @@
 
 提示消息又称“工具提示”，在用户鼠标悬停在元素上时及时显示额外的内容。
 
+## 纯 CSS 提示
+
+```html:example:row -gap-x-32 gap-y-4 flex-wrap
+<div class="hint inline-block" data-hint="提示消息">hint</div>
+<div class="hint hint-right inline-block" data-hint="提示消息">hint-right</div>
+<div class="hint hint-bottom inline-block" data-hint="提示消息">hint-bottom</div>
+<div class="hint hint-left inline-block" data-hint="提示消息">hint-left</div>
+
+<div class="hint hint-sm inline-block" data-hint="提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息">hint-sm</div>
+<div class="hint hint-md inline-block" data-hint="提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息">hint-md</div>
+<div class="hint hint-lg inline-block" data-hint="提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息">hint-lg</div>
+<div class="hint hint-xl inline-block" data-hint="提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息提示消息">hint-xl</div>
+
+<div class="hint hint-primary inline-block" data-hint="提示消息">hint-primary</div>
+<div class="hint hint-success inline-block" data-hint="提示消息">hint-success</div>
+<div class="hint hint-danger inline-block" data-hint="提示消息">hint-danger</div>
+<div class="hint hint-warning inline-block" data-hint="提示消息">hint-warning</div>
+<div class="hint hint-important inline-block" data-hint="提示消息">hint-important</div>
+<div class="hint hint-special inline-block" data-hint="提示消息">hint-special</div>
+```
+
 ## 用法
 
 使用组件类 `.btn` 来获得按钮外观，通常搭配 `<button>` 或 `<a>` 元素使用。
diff --git a/lib/tooltip/src/style/hint.css b/lib/tooltip/src/style/hint.css
new file mode 100644
index 0000000000..5d44be297f
--- /dev/null
+++ b/lib/tooltip/src/style/hint.css
@@ -0,0 +1,96 @@
+.hint,
+[class^="hint-"],
+[class*=" hint-"] {
+  @apply -relative;
+}
+.hint::before,
+[class^="hint-"]::before,
+[class*=" hint-"]::before {
+  @apply -content-[''] -absolute -w-0 -h-0 -border-solid;
+
+  /* Top */
+  margin-bottom: calc(0px - var(--tooltip-arrow));
+  border-width: var(--tooltip-arrow) var(--tooltip-arrow) 0 var(--tooltip-arrow);
+  border-color: var(--tooltip-bg) transparent transparent transparent;
+}
+.hint::after,
+[class^="hint-"]::after,
+[class*=" hint-"]::after {
+  @apply -content-[attr(data-hint)] -absolute -bg-[--tooltip-bg] -border-[--tooltip-color] -text-[--tooltip-text] -py-1 -px-2 -text-xs -max-w-md -rounded -shadow -whitespace-nowrap -overflow-hidden;
+  text-shadow: 0 1px 0 var(--tooltip-bg);
+}
+.hint::before,
+[class^="hint-"]::before,
+[class*=" hint-"]::before,
+.hint::after,
+[class^="hint-"]::after,
+[class*=" hint-"]::after {
+  @apply -z-tooltip -invisible -opacity-0 -transition-[opacity,visibility] -ease-in -pointer-events-none -delay-0;
+
+  /* Top */
+  @apply --translate-x-1/2 --translate-y-[--tooltip-arrow] -bottom-full -left-1/2;
+}
+.hint:hover::before,
+[class^="hint-"]:hover::before,
+[class*=" hint-"]:hover::before,
+.hint:hover::after,
+[class^="hint-"]:hover::after,
+[class*=" hint-"]:hover::after {
+  @apply -visible -opacity-100 -delay-[--tooltip-delay];
+}
+
+/* Bottom. */
+.hint-bottom::before {
+  margin-bottom: auto;
+  margin-top: calc(0px - var(--tooltip-arrow));
+  border-width: 0 var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow);
+  border-color: transparent transparent var(--tooltip-bg) transparent;
+}
+.hint-bottom::before,
+.hint-bottom::after {
+ @apply -translate-y-[--tooltip-arrow] -bottom-auto -top-full;
+}
+
+/* Left. */
+.hint-left::before {
+  margin-bottom: auto;
+  margin-right: calc(0px - var(--tooltip-arrow));
+  border-width: var(--tooltip-arrow) 0 var(--tooltip-arrow) var(--tooltip-arrow);
+  border-color: transparent transparent transparent var(--tooltip-bg);
+}
+.hint-left::before,
+.hint-left::after {
+  @apply --translate-x-[--tooltip-arrow] -translate-y-1/2 -bottom-1/2 -right-full -left-auto;
+}
+
+/* Right. */
+.hint-right::before {
+  margin-bottom: auto;
+  margin-left: calc(0px - var(--tooltip-arrow));
+  border-width: var(--tooltip-arrow) var(--tooltip-arrow) var(--tooltip-arrow) 0;
+  border-color: transparent var(--tooltip-bg) transparent;
+}
+.hint-right::before,
+.hint-right::after {
+  @apply -translate-x-[--tooltip-arrow] -translate-y-1/2 -bottom-1/2 -left-full;
+}
+
+/* Size. */
+.hint-sm::after
+.hint-md::after,
+.hint-lg::after,
+.hint-xl::after {
+  @apply -whitespace-normal -break-all;
+}
+.hint-sm::after {@apply -w-16;}
+.hint-md::after {@apply -w-32;}
+.hint-lg::after {@apply -w-64;}
+.hint-xl::after {@apply -w-96;}
+
+/* Colors. */
+.hint-primary {--tooltip-bg: var(--color-primary-500)}
+.hint-success {--tooltip-bg: var(--color-success-500)}
+.hint-danger {--tooltip-bg: var(--color-danger-500)}
+.hint-warning {--tooltip-bg: var(--color-warning-500)}
+.hint-important {--tooltip-bg: var(--color-important-500)}
+.hint-special {--tooltip-bg: var(--color-special-500)}
diff --git a/lib/tooltip/src/style/index.ts b/lib/tooltip/src/style/index.ts
index 99192b5c88..dfb8038ec8 100644
--- a/lib/tooltip/src/style/index.ts
+++ b/lib/tooltip/src/style/index.ts
@@ -1 +1,3 @@
+import './vars.css';
+import './hint.css';
 import './tooltip.css';
diff --git a/lib/tooltip/src/style/tooltip.css b/lib/tooltip/src/style/tooltip.css
index 83bb3912b7..a43cc22ac1 100644
--- a/lib/tooltip/src/style/tooltip.css
+++ b/lib/tooltip/src/style/tooltip.css
@@ -1,5 +1,5 @@
 .tooltip {
-  @apply -z-tooltip -rounded -bg-inverse -border-inverse -text-canvas -py-1 -px-2 -text-xs -max-w-md;
+  @apply -z-tooltip -rounded -bg-[--tooltip-bg] -border-[--tooltip-color] -text-[--tooltip-text] -py-1 -px-2 -text-xs -max-w-md;
 }
 .tooltip:not(.white) > .arrow {
   @apply -border-0;
diff --git a/lib/tooltip/src/style/vars.css b/lib/tooltip/src/style/vars.css
new file mode 100644
index 0000000000..91aed706f3
--- /dev/null
+++ b/lib/tooltip/src/style/vars.css
@@ -0,0 +1,6 @@
+:root {
+  --tooltip-bg: var(--skin-color, var(--color-inverse));
+  --tooltip-text: var(--skin-text, var(--color-canvas));
+  --tooltip-arrow: 6px;
+  --tooltip-delay: 0.5s;
+}