From b2d72ad9a2ac2d2e3f1668247bd2200a4e8d7ac5 Mon Sep 17 00:00:00 2001
From: Tienson Qin <tiensonqin@gmail.com>
Date: Thu, 11 Mar 2021 20:58:33 +0800
Subject: [PATCH] fix: priority display

Resolved #1445
---
 resources/css/common.css    |  4 ++++
 resources/css/style.css     |  1 +
 resources/css/style.dev.css |  1 +
 resources/css/tooltip.css   | 16 ++++++++++++++++
 4 files changed, 22 insertions(+)
 create mode 100644 resources/css/tooltip.css

diff --git a/resources/css/common.css b/resources/css/common.css
index 9193de449ea..bcf13b21bf4 100644
--- a/resources/css/common.css
+++ b/resources/css/common.css
@@ -777,6 +777,10 @@ a {
     transition: .3s;
 }
 
+a.tooltip-priority {
+    transition: none;
+}
+
 .page-reference:hover {
     background: var(--ls-secondary-background-color);
 }
diff --git a/resources/css/style.css b/resources/css/style.css
index 3a6e60b31de..fa93d060039 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -11,5 +11,6 @@
 @import "./datepicker.css";
 @import "./highlight.css";
 @import "./tailwind.core.css"; /* Build by gulp. Check `_buildTailwind` for more detail */
+@import "./tooltip.css";
 @import "./common.css";
 @import "./tailwind.build.css"; /* Build by gulp. Check `_buildTailwind` for more detail */
diff --git a/resources/css/style.dev.css b/resources/css/style.dev.css
index 39523d6d0e3..ed1ac0566be 100644
--- a/resources/css/style.dev.css
+++ b/resources/css/style.dev.css
@@ -10,5 +10,6 @@
 @import "./table.css";
 @import "./datepicker.css";
 @import "./highlight.css";
+@import "./tooltip.css";
 @import "./tailwind.core.css"; /* Build by gulp. Check `_buildTailwind` for more detail */
 @import "./common.css";
diff --git a/resources/css/tooltip.css b/resources/css/tooltip.css
new file mode 100644
index 00000000000..6746aa8c209
--- /dev/null
+++ b/resources/css/tooltip.css
@@ -0,0 +1,16 @@
+.Tooltip {
+    position:relative;
+}
+
+.Tooltip__label {--arrow-size: 4px;visibility:hidden;width:10ch;background:#000;color:#fff;text-align:center;border-radius:4px;padding:4px;position:absolute;z-index:10;font-size:0.7rem;line-height:1.5;top:calc(100% + var(--arrow-size) + 3px);left:calc(-50% + var(--arrow-size) / 2 - 1px);word-wrap:break-word}
+.Tooltip__label::after {content:"";border:var(--arrow-size) solid transparent;border-bottom-color:#000;position:absolute;bottom:100%;left:calc(50% - var(--arrow-size))}
+
+/* .Tooltip:not(:hover) {pointer-events:none} */
+
+.Tooltip:hover .Tooltip__label {
+    visibility:visible
+}
+
+.Tooltip__label:hover {
+    visibility:visible
+}