support arrowContent prop

HISTORY.md

@@ -1,5 +1,8 @@
 # History
 ----
+### 3.2.1
+
+- support arrowContent prop
 
 ### 3.2.0
 

README.md

@@ -96,12 +96,6 @@ online example: http://react-component.github.io/tooltip/examples/
           <td></td>
           <td>additional style of overlay node</td>
         </tr>
-         <tr>
-           <td>wrapStyle</td>
-           <td>Object</td>
-           <td></td>
-           <td>additional style  of wrap node</td>
-         </tr>
         <tr>
           <td>prefixCls</td>
           <td>String</td>
@@ -150,6 +144,12 @@ online example: http://react-component.github.io/tooltip/examples/
           <td></td>
           <td>popup content</td>
         </tr>
+        <tr>
+          <td>arrowContent</td>
+          <td>String|React.Element</td>
+          <td>''</td>
+          <td>arrow content</td>
+        </tr>
         <tr>
           <td>getTooltipContainer</td>
           <td>function</td>

assets/bootstrap_white.less

@@ -0,0 +1,189 @@
+@tooltip-prefix-cls: rc-tooltip;
+
+//
+// Tooltips
+// --------------------------------------------------
+@font-size-base         : 12px;
+@line-height-base       : 1.5;
+@border-radius-base     : 3px;
+@overlay-shadow              : 0 0 4px rgba(0, 0, 0, 0.17);
+//** Tooltip text color
+@tooltip-color: #333333;
+//** Tooltip background color
+@tooltip-bg: #ffffff;
+@tooltip-opacity: 0.9;
+
+@tooltip-border-width: 1px;
+@tooltip-border-color: #b1b1b1;
+@tooltip-shadow-width: 1px;
+
+//** Tooltip arrow width
+@tooltip-arrow-width: 6px;
+//** Tooltip distance with trigger
+//** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-border-color;
+@tooltip-arrow-inner-color: @tooltip-bg;
+
+// Base class
+.@{tooltip-prefix-cls} {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  line-height: @line-height-base;
+  font-size: @font-size-base;
+  background-color:rgba(0, 0, 0, 0.05);
+  padding: @tooltip-shadow-width;
+  opacity: @tooltip-opacity;
+
+  &-hidden {
+    display: none;
+  }
+}
+
+// Wrapper for the tooltip content
+.@{tooltip-prefix-cls}-inner {
+  padding: 8px 10px;
+  color: @tooltip-color;
+  text-align: left;
+  text-decoration: none;
+  background-color: @tooltip-bg;
+  border-radius: @border-radius-base;
+  min-height: 34px;
+  border:@tooltip-border-width solid @tooltip-border-color;
+}
+
+// Arrows
+.@{tooltip-prefix-cls}-arrow,
+.@{tooltip-prefix-cls}-arrow-inner{
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.@{tooltip-prefix-cls} {
+  &-placement-top &-arrow,
+  &-placement-topLeft &-arrow,
+  &-placement-topRight &-arrow{
+    bottom: -@tooltip-arrow-width + @tooltip-shadow-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+
+  &-placement-top &-arrow-inner,
+  &-placement-topLeft &-arrow-inner,
+  &-placement-topRight &-arrow-inner{
+    bottom: @tooltip-border-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-top &-arrow {
+    left: 50%;
+  }
+
+  &-placement-topLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-topRight &-arrow {
+    right: 15%;
+  }
+
+  &-placement-right &-arrow,
+  &-placement-rightTop &-arrow,
+  &-placement-rightBottom &-arrow {
+    left: -@tooltip-arrow-width + @tooltip-shadow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+
+  &-placement-right &-arrow-inner,
+  &-placement-rightTop &-arrow-inner,
+  &-placement-rightBottom &-arrow-inner {
+    left: @tooltip-border-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-right &-arrow {
+    top: 50%;
+  }
+
+  &-placement-rightTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-rightBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-left &-arrow,
+  &-placement-leftTop &-arrow,
+  &-placement-leftBottom &-arrow {
+    right: -@tooltip-arrow-width + @tooltip-shadow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+
+  &-placement-left &-arrow-inner,
+  &-placement-leftTop &-arrow-inner,
+  &-placement-leftBottom &-arrow-inner {
+    right: @tooltip-border-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-left &-arrow {
+    top: 50%;
+  }
+
+  &-placement-leftTop &-arrow {
+    top: 15%;
+    margin-top: 0;
+  }
+
+  &-placement-leftBottom &-arrow {
+    bottom: 15%;
+  }
+
+  &-placement-bottom &-arrow,
+  &-placement-bottomLeft &-arrow,
+  &-placement-bottomRight &-arrow {
+    top: -@tooltip-arrow-width + @tooltip-shadow-width;;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+
+  &-placement-bottom &-arrow-inner,
+  &-placement-bottomLeft &-arrow-inner,
+  &-placement-bottomRight &-arrow-inner {
+    top: @tooltip-border-width;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-inner-color;
+  }
+
+  &-placement-bottom &-arrow {
+    left: 50%;
+  }
+
+  &-placement-bottomLeft &-arrow {
+    left: 15%;
+  }
+
+  &-placement-bottomRight &-arrow {
+    right: 15%;
+  }
+}
+@import "boostrap/anim.less";

examples/arrowContent.js

@@ -0,0 +1,64 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Tooltip from 'rc-tooltip';
+import 'rc-tooltip/assets/bootstrap_white.less';
+const text = <span>提示文字</span>;
+const styles = {
+  display: 'inline-block',
+  lineHeight: '40px',
+  height: '40px',
+  width: '80px',
+  textAlign: 'center',
+  background: '#f6f6f6',
+  marginRight: '1em',
+  marginBottom: '1em',
+  borderRadius: '6px',
+};
+
+const Test = React.createClass({
+  render() {
+    return (<div>
+      <Tooltip placement="left" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>左边</a>
+      </Tooltip>
+      <Tooltip placement="top" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>上边</a>
+      </Tooltip>
+      <Tooltip placement="bottom" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>下边</a>
+      </Tooltip>
+      <Tooltip placement="right" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>右边</a>
+      </Tooltip>
+      <br />
+      <Tooltip placement="leftTop" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>左上</a>
+      </Tooltip>
+      <Tooltip placement="leftBottom" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>左下</a>
+      </Tooltip>
+      <Tooltip placement="rightTop" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>右上</a>
+      </Tooltip>
+      <Tooltip placement="rightBottom" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>右下</a>
+      </Tooltip>
+      <br />
+      <Tooltip placement="topLeft" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>上左</a>
+      </Tooltip>
+      <Tooltip placement="topRight" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>上右</a>
+      </Tooltip>
+      <Tooltip placement="bottomLeft" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>下左</a>
+      </Tooltip>
+      <Tooltip placement="bottomRight" overlay={text} arrowContent={<div className="rc-tooltip-arrow-inner"></div>}>
+        <a href="#" style={styles}>下右</a>
+      </Tooltip>
+    </div>);
+  },
+});
+
+ReactDOM.render(<Test/>, document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tooltip",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "tooltip ui component for react",
   "keywords": [
     "react",

src/Tooltip.jsx

@@ -25,6 +25,10 @@ const Tooltip = React.createClass({
       offset: PropTypes.array,
       targetOffset: PropTypes.array,
     }),
+    arrowContent: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
+    ]),
   },
 
   getDefaultProps() {
@@ -36,13 +40,16 @@ const Tooltip = React.createClass({
       align: {},
       placement: 'right',
       trigger: ['hover'],
+      arrowContent: '',
     };
   },
 
   getPopupElement() {
-    const {overlay, prefixCls} = this.props;
+    const {arrowContent, overlay, prefixCls} = this.props;
     return ([
-      <div className={`${prefixCls}-arrow`} key="arrow"></div>,
+      <div className={`${prefixCls}-arrow`} key="arrow">
+        {arrowContent}
+      </div>,
       <div className={`${prefixCls}-inner`} key="content">
         {overlay}
       </div>,