From 71e0f9aae347b340706ed71a460988c0b99c406b Mon Sep 17 00:00:00 2001 From: daqiu Date: Wed, 9 Dec 2015 16:50:35 +0800 Subject: [PATCH] support arrowContent prop --- HISTORY.md | 3 + README.md | 12 +-- assets/bootstrap_white.less | 189 ++++++++++++++++++++++++++++++++++++ examples/arrowContent.html | 0 examples/arrowContent.js | 64 ++++++++++++ package.json | 2 +- src/Tooltip.jsx | 11 ++- 7 files changed, 272 insertions(+), 9 deletions(-) create mode 100644 assets/bootstrap_white.less create mode 100644 examples/arrowContent.html create mode 100644 examples/arrowContent.js diff --git a/HISTORY.md b/HISTORY.md index 45d5e1f..b6c555d 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,5 +1,8 @@ # History ---- +### 3.2.1 + +- support arrowContent prop ### 3.2.0 diff --git a/README.md b/README.md index 9b30daf..09a0bf2 100644 --- a/README.md +++ b/README.md @@ -96,12 +96,6 @@ online example: http://react-component.github.io/tooltip/examples/ additional style of overlay node - - wrapStyle - Object - - additional style of wrap node - prefixCls String @@ -150,6 +144,12 @@ online example: http://react-component.github.io/tooltip/examples/ popup content + + arrowContent + String|React.Element + '' + arrow content + getTooltipContainer function diff --git a/assets/bootstrap_white.less b/assets/bootstrap_white.less new file mode 100644 index 0000000..a9cb579 --- /dev/null +++ b/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"; \ No newline at end of file diff --git a/examples/arrowContent.html b/examples/arrowContent.html new file mode 100644 index 0000000..e69de29 diff --git a/examples/arrowContent.js b/examples/arrowContent.js new file mode 100644 index 0000000..e8067a7 --- /dev/null +++ b/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 = 提示文字; +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 (
+
}> + 左边 + + }> + 上边 + + }> + 下边 + + }> + 右边 + +
+ }> + 左上 + + }> + 左下 + + }> + 右上 + + }> + 右下 + +
+ }> + 上左 + + }> + 上右 + + }> + 下左 + + }> + 下右 + + ); + }, +}); + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/package.json b/package.json index 78d7563..08d9ed8 100644 --- a/package.json +++ b/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", diff --git a/src/Tooltip.jsx b/src/Tooltip.jsx index 3b89a4a..ab2b9f1 100644 --- a/src/Tooltip.jsx +++ b/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 ([ -
, +
+ {arrowContent} +
,
{overlay}
,