optimize Tooltip style

optimize Tooltip style

src/styles/components/tooltip.less

@@ -19,7 +19,7 @@
     &-inner{
         max-width: @tooltip-max-width;
         min-height: 34px;
-        padding: 8px 10px;
+        padding: 8px 12px;
         color: @tooltip-color;
         text-align: left;
         text-decoration: none;

src/styles/themes/default/custom.less

@@ -34,7 +34,7 @@
 // Background color
 @background-color-base        : #f7f7f7;  // base
 @background-color-select-hover: @input-disabled-bg;
-@tooltip-bg                   : #373737;
+@tooltip-bg                   : rgba(70, 76, 91, .9);
 
 // Shadow
 @shadow-color           : rgba(100, 100, 100, .2);

test/app.vue

@@ -31,6 +31,7 @@ li + li {
                 <li><a v-link="'/more'">More</a></li>
                 <li><a v-link="'/page'">Page</a></li>
                 <li><a v-link="'/poptip'">Poptip</a></li>
+                <li><a v-link="'/tooltip'">Tooltip</a></li>
                 <li><a v-link="'/radio'">Radio</a></li>
                 <li><a v-link="'/select'">Select</a></li>
                 <li><a v-link="'/slider'">Slider</a></li>

test/main.js

@@ -85,6 +85,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/input.vue'], resolve);
         }
+    },
+    '/tooltip': {
+        component: function (resolve) {
+            require(['./routers/tooltip.vue'], resolve);
+        }
     }
 });
 

test/routers/poptip.vue

@@ -51,6 +51,9 @@
     }
 </style>
 <template>
+    <Tooltip content="这里是提示文字">
+        当鼠标经过这段文字时，会显示一个气泡框
+    </Tooltip>
     <div class="tooltip_out">
         <!--<Poptip class="tip" placement="left-start" trigger="hover">-->
             <!--<div class="tip-inner">-->

test/routers/tooltip.vue

@@ -0,0 +1,70 @@
+<style scoped>
+    .top,.bottom{
+        text-align: center;
+    }
+    .center{
+        width: 300px;
+        margin: 10px auto;
+        overflow: hidden;
+    }
+    .center-left{
+        float: left;
+    }
+    .center-right{
+        float: right;
+    }
+</style>
+<template>
+    <div class="top">
+        <Tooltip content="Top Left 文字提示" placement="top-start">
+            <i-button>上左</i-button>
+        </Tooltip>
+        <Tooltip content="Top Center 文字提示" placement="top">
+            <i-button>上边</i-button>
+        </Tooltip>
+        <Tooltip content="Top Right 文字提示" placement="top-end">
+            <i-button>上右</i-button>
+        </Tooltip>
+    </div>
+    <div class="center">
+        <div class="center-left">
+            <Tooltip content="Left Top 文字提示" placement="left-start">
+                <i-button>左上</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Left Center 文字提示" placement="left">
+                <i-button>左边</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Left Bottom 文字提示" placement="left-end">
+                <i-button>左下</i-button>
+            </Tooltip>
+        </div>
+        <div class="center-right">
+            <Tooltip content="Right Top 文字提示" placement="right-start">
+                <i-button>右上</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Right Center 文字提示" placement="right">
+                <i-button>右边</i-button>
+            </Tooltip><br><br>
+            <Tooltip content="Right Bottom 文字提示" placement="right-end">
+                <i-button>右下</i-button>
+            </Tooltip>
+        </div>
+    </div>
+    <div class="bottom">
+        <Tooltip content="Bottom Left 文字提示" placement="bottom-start">
+            <i-button>下左</i-button>
+        </Tooltip>
+        <Tooltip content="Bottom Center 文字提示" placement="bottom">
+            <i-button>下边</i-button>
+        </Tooltip>
+        <Tooltip content="Bottom Right 文字提示" placement="bottom-end">
+            <i-button>下右</i-button>
+        </Tooltip>
+    </div>
+</template>
+<script>
+    import { Tooltip, iButton } from 'iview';
+    export default {
+        components: { Tooltip, iButton }
+    }
+</script>