diff --git a/README.md b/README.md
index be2d378..e1da085 100644
--- a/README.md
+++ b/README.md
@@ -152,6 +152,18 @@ online example: http://react-component.github.io/tooltip/examples/
|
function returning html node which will act as tooltip contaier |
+
+ | offsetX |
+ number |
+ |
+ Offset in the X direction by a number of pixels |
+
+
+ | offsetY |
+ number |
+ |
+ Offset in the Y direction by a number of pixels |
+
diff --git a/examples/simple.js b/examples/simple.js
index 8fb0631..4ca6591 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -11,7 +11,9 @@ var Test = React.createClass({
placement: 'right',
trigger: {
hover: 1
- }
+ },
+ offsetX: null,
+ offsetY: null
};
},
onPlacementChange(e) {
@@ -38,6 +40,18 @@ var Test = React.createClass({
});
},
+ onOffsetXChange(e) {
+ this.setState({
+ offsetX: e.target.value
+ })
+ },
+
+ onOffsetYChange(e) {
+ this.setState({
+ offsetY: e.target.value
+ })
+ },
+
preventDefault(e) {
e.preventDefault();
},
@@ -87,6 +101,15 @@ var Test = React.createClass({
click
+
+
+
i am a tooltip}
+ offsetX={this.state.offsetX}
+ offsetY={this.state.offsetY}
transitionName={this.state.transitionName}>
trigger
diff --git a/src/Popup.jsx b/src/Popup.jsx
index ab1f296..b9c6686 100644
--- a/src/Popup.jsx
+++ b/src/Popup.jsx
@@ -57,7 +57,7 @@ const Popup = React.createClass({
render() {
const props = this.props;
- const {prefixCls, placement, style} = props;
+ const {prefixCls, placement, style, offsetX, offsetY} = props;
let className;
if (props.visible || !this.rootNode) {
@@ -81,6 +81,12 @@ const Popup = React.createClass({
} else {
align = placementAlignMap[placement];
}
+ if (offsetX) {
+ align.offset[0] = offsetX;
+ }
+ if (offsetY) {
+ align.offset[1] = offsetY;
+ }
return (
{
+ it('offsetX works', (done)=> {
+ let offsetX = 10;
+ var tooltip = React.render(tooltip}>
+ click
+ , div);
+ var domNode = React.findDOMNode(tooltip).firstChild;
+ Simulate.click(domNode);
+ setTimeout(()=> {
+ var popupDomNode = tooltip.getPopupDomNode();
+ expect(popupDomNode).to.be.ok();
+ var targetOffset = $(domNode).offset();
+ var popupOffset = $(popupDomNode).offset();
+ console.log(popupOffset, targetOffset);
+ expect(popupOffset.left).to.be(targetOffset.left + offsetX);
+ Simulate.click(domNode);
+ done();
+ }, 20);
+ });
+
+ it('offsetY works', (done)=> {
+ let offsetY = 50;
+ var tooltip = React.render(tooltip}>
+ click
+ , div);
+ var domNode = React.findDOMNode(tooltip).firstChild;
+ Simulate.click(domNode);
+ setTimeout(()=> {
+ var popupDomNode = tooltip.getPopupDomNode();
+ expect(popupDomNode).to.be.ok();
+ var targetOffset = $(domNode).offset();
+ var popupOffset = $(popupDomNode).offset();
+ console.log(popupOffset, targetOffset);
+ expect(popupOffset.top).to.be(targetOffset.top - $(popupDomNode).outerHeight() + offsetY);
+ Simulate.click(domNode);
+ done();
+ }, 20);
+ });
+
+ });
+
if (window.TransitionEvent) {
it('transitionName works', (done)=> {
var tooltip = React.render(