tooltip horizontal fix

Author: ivansfdc

components/SLDSPopover.js

@@ -116,10 +116,22 @@ module.exports = React.createClass( {
   beforeClose (){
   },
 
+  getPosition () {
+    let positions = [];
+    if (this.props.verticalAlign === 'top' || this.props.verticalAlign === 'bottom') {
+      positions.push(this.props.verticalAlign);
+      positions.push(this.props.horizontalAlign);
+    }
+    else {
+      positions.push(this.props.horizontalAlign);
+      positions.push(this.props.verticalAlign);
+    }
+    return positions.join(' ');
+  },
+
   dropOptions () {
     const target = this.props.targetElement?React.findDOMNode(this.props.targetElement):React.findDOMNode(this).parentNode;
-    const position = this.props.verticalAlign+' '+this.props.horizontalAlign;
-    console.log('position: ',position);
+    const position = this.getPosition();
     return {
       target: target,
       content: this.popoverElement,

components/SLDSTooltip/index.jsx

@@ -28,7 +28,7 @@ module.exports = React.createClass( {
     return {
       content:<span>Tooltip</span>,
       align: 'top',
-      hoverCloseDelay:200,
+      hoverCloseDelay:350,
       openOnHover:false
     };
   },
@@ -66,6 +66,26 @@ module.exports = React.createClass( {
     return <div className='slds-popover__body'>{this.props.content}</div>;
   },
 
+  getHorizontalAlign() {
+    if (this.props.align==='left') {
+      return 'right';
+    }
+    else if (this.props.align==='right') {
+      return 'left';
+    }
+    return 'center';
+  },
+
+  getVerticalAlign() {
+    if (this.props.align==='bottom') {
+      return 'bottom';
+    }
+    else if (this.props.align==='top') {
+      return 'top';
+    }
+    return 'middle';
+  },
+
   getTooltip() {
     const style = {
       'slds-popover':true,
@@ -82,10 +102,10 @@ module.exports = React.createClass( {
           className=''
           marginTop='1rem'
           marginBottom='1rem'
-          marginLeft='1rem'
-          marginRight='1rem'
-          horizontalAlign={this.props.align==='left' || this.props.align==='right'?this.props.align:'center'}
-          verticalAlign={this.props.align==='bottom' || this.props.align==='top'?this.props.align:'center'}
+          marginLeft='1.5rem'
+          marginRight='1.5rem'
+          horizontalAlign={this.getHorizontalAlign()}
+          verticalAlign={this.getVerticalAlign()}
           flippable={false}
           onClose={this.handleCancel}>
           <div className={cx(style)}>

demo/pages/HomePage/TooltipSection.jsx

@@ -14,7 +14,7 @@ import {SLDSTooltip,SLDSButton} from '../../../components';
 
 import {default as PrismCode} from 'react-prism/lib/PrismCode';
 
-
+const alignNames = ['left','right','top','bottom'];
 
 module.exports = React.createClass( {
 
@@ -23,7 +23,15 @@ module.exports = React.createClass( {
   },
 
   getInitialState () {
-    return {};
+    return {
+      alignIndex:0
+    };
+  },
+
+  componentDidMount () {
+    setInterval ( ()=>{
+      this.nextAlign();
+    },2000);
   },
 
   handleOnUpdateHighlighted () {
@@ -38,6 +46,14 @@ module.exports = React.createClass( {
     console.log('onClick should be defined');
   },
 
+  nextAlign() {
+    let nextAlignIndex = this.state.alignIndex+1;
+    if (nextAlignIndex >= alignNames.length) {
+      nextAlignIndex = 0;
+    }
+    this.setState({alignIndex:nextAlignIndex});
+  },
+
   render() {
     return (
 
@@ -51,24 +67,28 @@ module.exports = React.createClass( {
                 {require("raw-loader!../../code-snippets/SLDSDropdownPage.txt")}
               </PrismCode>
 */}
-              <div ref="super" className="slds-p-vertical--large">
-                <p>
-                  <SLDSTooltip 
-                    content={<span>Tooltip with top alignment</span>}
-                    align='top'
-                    targetElement={this.refs.super}>Tooltip align top</SLDSTooltip>
-                </p>
-              </div>
-
-              <div ref="super" className="slds-p-vertical--large">
-                <p>
-                  <SLDSTooltip 
-                    content={<span>Tooltip with bottom alignment</span>}
-                    align='bottom'
-                    openOnHover={true}
-                    targetElement={this.refs.super}>Tooltip open on hover</SLDSTooltip>
-                </p>
-              </div>
+              <section style={{paddingLeft:'10rem'}}>
+                <div className="slds-p-vertical--large">
+                  <p>
+                    <SLDSTooltip 
+                      key={'align_'+this.state.alignIndex}
+                      content={<span>Tooltip with top alignment</span>}
+                      align={alignNames[this.state.alignIndex]}>
+                      Tooltip align top
+                    </SLDSTooltip>
+                  </p>
+                </div>
+
+                <div ref="super" className="slds-p-vertical--large">
+                  <p>
+                    <SLDSTooltip 
+                      content={<span>Tooltip with bottom alignment</span>}
+                      align='bottom'
+                      openOnHover={true}
+                      targetElement={this.refs.super}>Tooltip open on hover</SLDSTooltip>
+                  </p>
+                </div>
+              </section>
 
 
             </div>