组件：提示

workbunny · Dec 13, 2024 · 4633951 · 4633951
1 parent fad1f30
commit 4633951
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 71 deletions.
diff --git a/dist/bunny.css b/dist/bunny.css
@@ -943,97 +943,62 @@ button[disabled].bny-btn {
 }
 
 /* 提示tips */
-/* [tips-top],
-[tips-right],
+[tips-top],
 [tips-bottom],
-[tips-left] {
-    margin: 24px;
+[tips-left],
+[tips-right] {
     position: relative;
+    overflow: unset;
 }
 
-[tips-top]:hover::after,
-[tips-right]:hover::after,
-[tips-bottom]:hover::after,
-[tips-left]:hover::after {
-    opacity: 1;
-    transition: opacity 235ms ease-in-out, visibility 0s linear;
-    visibility: visible;
-}
-
-[tips-top]::after,
-[tips-right]::after,
-[tips-bottom]::after,
-[tips-left]::after {
-    background-color: var(--black-40);
-    border-color: var(--primary-40);
-    color: var(--white-10);
-    border-style: solid;
-    border-width: 2px;
-    font-size: 0.7em;
-    left: 50%;
-    min-width: 80px;
-    opacity: 0;
-    padding: 4px 2px;
+[tips-top]::before,
+[tips-bottom]::before,
+[tips-left]::before,
+[tips-right]::before {
+    content: "";
     position: absolute;
-    text-align: center;
-    top: -6px;
-    transform: translateX(-50%) translateY(-100%);
-    transition: opacity 235ms ease-in-out, visibility 0s linear 235ms;
-    visibility: hidden;
+    background-color: var(--muted);
+    color: var(--white-ligth);
     border-radius: 4px;
+    white-space: nowrap;
+    /* 确保文本不会换行 */
+    z-index: 999;
 }
 
-[tips-top]::before {
-    left: 50%;
+[tips-top]:hover:before,
+[tips-bottom]:hover::before,
+[tips-left]:hover::before,
+[tips-right]:hover::before {
+    padding: 5px 10px;
 }
 
-[tips-top]::after {
-    content: attr(tips-top)!important;
+[tips-top]:hover:before {
+    content: attr(tips-top);
+    bottom: 125%;
     left: 50%;
+    transform: translateX(-50%);
 }
 
-[tips-bottom]::before {
-    margin-top: 8px;
-    top: 100%;
-    transform: translateX(-50%) translatey(-100%) rotate(-180deg);
-}
-
-[tips-bottom]::after {
+[tips-bottom]:hover:before {
     content: attr(tips-bottom);
-    margin-top: 8px;
-    top: 100%;
-    transform: translateX(-50%) translateY(0%);
-}
-
-[tips-left]::before {
-    left: 0;
-    margin-left: -12px;
-    top: 50%;
-    transform: translateY(-50%) rotate(-90deg);
+    top: 125%;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
-[tips-left]::after {
+[tips-left]:hover:before {
     content: attr(tips-left);
-    left: 0;
-    margin-left: -8px;
     top: 50%;
-    transform: translateX(-100%) translateY(-50%);
+    right: 125%;
+    transform: translateY(-50%);
 }
 
-[tips-right]::before {
-    left: 100%;
-    margin-left: 1px;
-    top: 50%;
-    transform: translatey(-50%) rotate(90deg);
-}
-
-[tips-right]::after {
+[tips-right]:hover:before {
     content: attr(tips-right);
-    left: 100%;
-    margin-left: 8px;
     top: 50%;
-    transform: translateX(0%) translateY(-50%);
-} */
+    left: 125%;
+    transform: translateY(-50%);
+}
 
 /* 走马灯 */
 .bny-marquee {

diff --git a/doc/tips.html b/doc/tips.html
@@ -1,5 +1,5 @@
 <div>
-    <p>tips：(草稿中)</p>
+    <p>提示：</p>
     <div class="row">
         <div class="col col-3">
             <button class="bny-btn" tips-top="向上" title="向上">显示在上</button>
@@ -16,7 +16,7 @@
     </div>
     <div class="row">
         <div class="col col-3">
-            <div tips-top="向上">...</div>
+            <span tips-top="向上">我这个向上</span>
         </div>
     </div>
 </div>