update tooltip style

components/tooltip/index.jsx

@@ -1,6 +1,5 @@
 var React = require('react');
 var Tooltip = require('rc-tooltip');
-require('rc-tooltip/assets/bootstrap.css');
 
 module.exports = React.createClass({
   getInitialState: function () {
@@ -17,6 +16,7 @@ module.exports = React.createClass({
   render: function() {
     return  (
       <Tooltip placement={this.state.placement}
+        prefixCls="ant-tooltip"
         trigger="hover"
         overlay={this.state.title}>
         {this.props.children}

style/components/tooltip.less

@@ -0,0 +1,86 @@
+@import "../mixins/index";
+@tooltipPrefixClass: ~"@{css-prefix}tooltip";
+
+//
+// Tooltips
+// --------------------------------------------------
+
+//** Tooltip max width
+@tooltip-max-width:           250px;
+//** Tooltip text color
+@tooltip-color:               #fff;
+//** Tooltip background color
+@tooltip-bg:                  #373737;
+@tooltip-opacity:             1;
+
+//** Tooltip arrow width
+@tooltip-arrow-width:         5px;
+//** Tooltip arrow color
+@tooltip-arrow-color:         @tooltip-bg;
+
+// Base class
+.@{tooltipPrefixClass} {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  font-size: @font-size-base;
+  line-height: 1.5;
+
+  &-placement-top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
+  &-placement-right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
+  &-placement-bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
+  &-placement-left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+}
+
+// Wrapper for the tooltip content
+.@{tooltipPrefixClass}-inner {
+  max-width: @tooltip-max-width;
+  padding: 7px 10px;
+  color: @tooltip-color;
+  text-align: left;
+  text-decoration: none;
+  background-color: @tooltip-bg;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0,0,0,0.4);
+}
+
+// Arrows
+.@{tooltipPrefixClass}-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.@{tooltipPrefixClass} {
+  &-placement-top &-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &-placement-right &-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+  &-placement-left &-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+  &-placement-bottom &-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+}