minor tooltip update

Author: ivansfdc

components/SLDSTooltip/index.jsx

@@ -68,10 +68,10 @@ module.exports = React.createClass( {
 
   getHorizontalAlign() {
     if (this.props.align==='left') {
-      return 'right';
+      return 'left';
     }
     else if (this.props.align==='right') {
-      return 'left';
+      return 'right';
     }
     return 'center';
   },
@@ -92,11 +92,12 @@ module.exports = React.createClass( {
       'slds-popover--tooltip':true,
       'slds-nubbin--top':this.props.align === 'bottom',
       'slds-nubbin--bottom':this.props.align === 'top',
-      'slds-nubbin--left':this.props.align === 'left',
-      'slds-nubbin--right':this.props.align === 'right'
+      'slds-nubbin--left':this.props.align === 'right',
+      'slds-nubbin--right':this.props.align === 'left'
     };
 
     return this.state.isOpen?<SLDSPopover
+          key={this.getHorizontalAlign()+' '+this.getVerticalAlign()}
           targetElement={this.refs.tooltipTarget}
           closeOnTabKey={true}
           className=''

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'];
+const alignNames = ['left','top','right','bottom'];
 
 module.exports = React.createClass( {
 
@@ -31,7 +31,7 @@ module.exports = React.createClass( {
   componentDidMount () {
     setInterval ( ()=>{
       this.nextAlign();
-    },2000);
+    },300);
   },
 
   handleOnUpdateHighlighted () {
@@ -71,7 +71,6 @@ module.exports = React.createClass( {
                 <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
@@ -80,7 +79,7 @@ module.exports = React.createClass( {
                 </div>
 
                 <div ref="super" className="slds-p-vertical--large">
-                  <p>
+                  <p style={{marginTop:'5rem'}}>
                     <SLDSTooltip 
                       content={<span>Tooltip with bottom alignment</span>}
                       align='bottom'