tooltip progress

Author: ivansfdc

components/SLDSPopover.js

@@ -41,7 +41,10 @@ module.exports = React.createClass( {
       className: 'slds-dropdown',
       closeOnTabKey: false,
       marginTop:'0.20rem',
-      marginBottom:'0.35rem'
+      marginBottom:'0.35rem',
+      marginLeft:0,
+      marginRight:0,
+      flippable:true
     };
   },
 
@@ -95,6 +98,8 @@ module.exports = React.createClass( {
           WebkitTransform:'none',
           'marginTop':this.props.marginTop,
           'marginBottom':this.props.marginBottom,
+          'marginLeft':this.props.marginLeft,
+          'marginRight':this.props.marginRight,
           'float':'inherit',
           'position':'inherit'
         }}
@@ -114,13 +119,14 @@ module.exports = React.createClass( {
   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);
     return {
       target: target,
       content: this.popoverElement,
       position: position,
       openOn: 'always',
       beforeClose:this.beforeClose,
-      constrainToWindow:true,
+      constrainToWindow:this.props.flippable,
       constrainToScrollParent:false,
       remove:true
     };

components/SLDSTooltip/index.jsx

@@ -15,58 +15,88 @@ import SLDSPopover from '../SLDSPopover';
 import {KEYS,EventUtil} from '../utils';
 import omit from 'lodash.omit';
 
+import cx from 'classnames';
 
 module.exports = React.createClass( {
 
   propTypes: {
     hoverCloseDelay:PropTypes.number
   },
 
-  getDefaultProps(){
+
+  getDefaultProps () {
     return {
-      hoverCloseDelay:300
-    }
+      content:<span>Tooltip</span>,
+      align: 'top',
+      hoverCloseDelay:200,
+      openOnHover:false
+    };
   },
 
   getInitialState(){
     return {
-      isOpen:false
+      isOpen:!this.props.openOnHover,
+      isClosing:false
     };
   },
 
   componentDidMount(){
   },
 
   handleMouseEnter(event) {
-    this.setState({isOpen:true});
+    this.setState({
+      isOpen:true,
+      isClosing:false
+    });
   },
 
   handleMouseLeave(event) {
-    this.setState({isOpen:false});
+    this.setState({isClosing:true});
+    setTimeout(()=>{
+      if(this.isMounted && this.state.isClosing){
+        this.setState({
+          isOpen:false,
+          isClosing:false
+        });
+      }
+    },this.props.hoverCloseDelay)
   },
 
   getTooltipContent() {
-    return <div className='slds-popover__body'>SUPER STUFF IS HERE!</div>;
+    return <div className='slds-popover__body'>{this.props.content}</div>;
   },
 
   getTooltip() {
+    const style = {
+      'slds-popover':true,
+      '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'
+    };
+
     return this.state.isOpen?<SLDSPopover
           targetElement={this.refs.tooltipTarget}
           closeOnTabKey={true}
           className=''
           marginTop='1rem'
           marginBottom='1rem'
-          horizontalAlign='center'
+          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'}
+          flippable={false}
           onClose={this.handleCancel}>
-          <div className='slds-popover slds-popover--tooltip slds-nubbin--top'>
-          {this.getTooltipContent()}
+          <div className={cx(style)}>
+            {this.getTooltipContent()}
           </div>
         </SLDSPopover>:null;
   },
 
   render(){
     return (
-      <span refs='tooltipTarget' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <span refs='tooltipTarget' onMouseEnter={this.props.openOnHover?this.handleMouseEnter:null} onMouseLeave={this.props.openOnHover?this.handleMouseLeave:null}>
         { this.props.children }
         { this.getTooltip() }
       </span>

demo/pages/HomePage/TooltipSection.jsx

@@ -44,16 +44,33 @@ module.exports = React.createClass( {
 
             <div className="slds-p-around--medium">
               <h3 id='dropdownSection' className="slds-text-heading--medium slds-truncate">
-                Dropdown Base
+                Tooltip
               </h3>
-
+{/*
               <PrismCode className='language-markup'>
                 {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">
-                SUPER!!!
+                <p>
+                  <SLDSTooltip 
+                    content={<span>Tooltip with bottom alignment</span>}
+                    align='bottom'
+                    openOnHover={true}
+                    targetElement={this.refs.super}>Tooltip open on hover</SLDSTooltip>
+                </p>
               </div>
-                <SLDSTooltip targetElement={this.refs.super}>Tooltip trigger</SLDSTooltip>
+
+
             </div>