From 16e850535bda62da9fe3a42ffad2aa4206727f77 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Fri, 22 Jun 2018 15:04:38 +0800
Subject: [PATCH] Tooltip add prop theme

---
 examples/routers/tooltip.vue       |  2 +-
 src/styles/components/tooltip.less | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/examples/routers/tooltip.vue b/examples/routers/tooltip.vue
index ce9aec3..453c0cf 100644
--- a/examples/routers/tooltip.vue
+++ b/examples/routers/tooltip.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="dark">
+        <Tooltip always placement="top" transfer :content="text" :delay="1000" theme="light">
             <Button @click="disabled = true">延时1秒显示</Button>
         </Tooltip>
         <Tooltip placement="top" transfer :content="text">
diff --git a/src/styles/components/tooltip.less b/src/styles/components/tooltip.less
index 34b7a11..6fc994c 100644
--- a/src/styles/components/tooltip.less
+++ b/src/styles/components/tooltip.less
@@ -3,7 +3,11 @@
 @tooltip-max-width: 250px;
 @tooltip-arrow-width: 5px;
 @tooltip-distance: @tooltip-arrow-width - 1 + 4;
-@poptip-arrow-color: hsla(0,0%,85%,.5);
+
+@tooltip-arrow-width-light: 7px;
+@tooltip-distance-light: @tooltip-arrow-width-light - 1 + 4;
+@tooltip-arrow-outer-width-light: (@tooltip-arrow-width-light + 1);
+@tooltip-arrow-color: hsla(0,0%,85%,.5);
 
 .@{tooltip-prefix-cls} {
     display: inline-block;
@@ -17,9 +21,44 @@
         .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
     }
     &-light&-popper{
-        .popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @poptip-arrow-color);
-    }
+        .popper(@tooltip-arrow, @tooltip-arrow-width-light, @tooltip-distance-light, @tooltip-arrow-color);
+
+        &[x-placement^="top"] .@{tooltip-arrow}:after {
+            content: " ";
+            bottom: 1px;
+            margin-left: -@tooltip-arrow-width-light;
+            border-bottom-width: 0;
+            border-top-width: @tooltip-arrow-width-light;
+            border-top-color: #fff;
+        }
+
+        &[x-placement^="right"] .@{tooltip-arrow}:after {
+            content: " ";
+            left: 1px;
+            bottom: -@tooltip-arrow-width-light;
+            border-left-width: 0;
+            border-right-width: @tooltip-arrow-width-light;
+            border-right-color: #fff;
+        }
 
+        &[x-placement^="bottom"] .@{tooltip-arrow}:after {
+            content: " ";
+            top: 1px;
+            margin-left: -@tooltip-arrow-width-light;
+            border-top-width: 0;
+            border-bottom-width: @tooltip-arrow-width-light;
+            border-bottom-color: #fff;
+        }
+
+        &[x-placement^="left"] .@{tooltip-arrow}:after {
+            content: " ";
+            right: 1px;
+            border-right-width: 0;
+            border-left-width: @tooltip-arrow-width-light;
+            border-left-color: #fff;
+            bottom: -@tooltip-arrow-width-light;
+        }
+    }
 
     &-inner{
         max-width: @tooltip-max-width;
@@ -46,4 +85,20 @@
         border-color: transparent;
         border-style: solid;
     }
+
+    &-light {
+        .@{tooltip-arrow}{
+            &:after{
+                display: block;
+                width: 0;
+                height: 0;
+                position: absolute;
+                border-color: transparent;
+                border-style: solid;
+                content: "";
+                border-width: @tooltip-arrow-width-light;
+            }
+            border-width: @tooltip-arrow-outer-width-light;
+        }
+    }
 }
\ No newline at end of file
--
libgit2 0.21.4