Improved Tooltip that doesn't add extra DOM node, and fix some React 0.14...

Improved Tooltip that doesn't add extra DOM node, and fix some React 0.14 incompatible double mustaches

frontend/src/admin/datamodel/components/FieldSet.jsx

@@ -11,7 +11,7 @@ export default class FieldSet extends Component {
         return (
             <fieldset className={"px2 pb2 bordered rounded " + border}>
                 {legend && <legend className="h5 text-bold text-uppercase px1" style={{ marginLeft: "-0.5rem" }}>{legend}</legend>}
-                {{children}}
+                {children}
             </fieldset>
         );
     }

frontend/src/admin/datamodel/components/ObjectRetireModal.jsx

@@ -36,8 +36,8 @@ export default class ObjectRetireModal extends Component {
             >
                 <form className="flex flex-column flex-full">
                     <div className="Form-inputs pb4">
-                        <p>Saved questions and other things that depend on this {{objectType}} will continue to work, but this {{objectType}} will no lgoner by selectable from the query builder.</p>
-                        <p>If you're sure you want to retire this {{objectType}}, please write a quick explanation of why it's being retired:</p>
+                        <p>Saved questions and other things that depend on this {objectType} will continue to work, but this {objectType} will no lgoner by selectable from the query builder.</p>
+                        <p>If you're sure you want to retire this {objectType}, please write a quick explanation of why it's being retired:</p>
                         <textarea
                             ref="revision_message"
                             className="input full text-default h4"

frontend/src/components/Tooltip.jsx

@@ -10,31 +10,38 @@ export default class Tooltip extends Component {
         };
     }
 
-    static propTypes = {};
-    static defaultProps = {};
+    static propTypes = {
+        tooltip: PropTypes.node.isRequired,
+        children: PropTypes.element.isRequired
+    };
 
     render() {
-        let { tooltipElement, className } = this.props;
-        return (
-            <span
-                className={className}
-                onMouseEnter={() => this.setState({ isOpen: true })}
-                onMouseLeave={() => this.setState({ isOpen: false })}
-            >
-                {this.props.children}
-                <Popover
-                    isOpen={this.state.isOpen}
-                    className="PopoverBody--tooltip"
-                    verticalAttachments={["top", "bottom"]}
-                    targetOffsetY={10}
-                >
-                    { typeof tooltipElement === "string" ?
-                        <div className="p2" style={{maxWidth: "12em"}}>{tooltipElement}</div>
-                    :
-                        {tooltipElement}
-                    }
-                </Popover>
-            </span>
-        );
+        let { tooltip, children } = this.props;
+        let { isOpen } = this.state;
+
+        let child = React.Children.only(children);
+        return React.cloneElement(child, {
+            onMouseEnter: () => this.setState({ isOpen: true }),
+            onMouseLeave: () => this.setState({ isOpen: false }),
+            children: React.Children.toArray(child.props.children).concat(
+                <TooltipPopover isOpen={isOpen} tooltip={tooltip} />
+            )
+        });
     }
 }
+
+const TooltipPopover = ({ isOpen, tooltip }) =>
+    <Popover
+        isOpen={isOpen}
+        className="PopoverBody--tooltip"
+        verticalAttachments={["top", "bottom"]}
+        targetOffsetY={10}
+    >
+        { typeof tooltip === "string" ?
+            <div className="p2" style={{maxWidth: "12em"}}>
+                {tooltip}
+            </div>
+        :
+            tooltip
+        }
+    </Popover>

frontend/src/dashboard/components/AddSeriesModal.jsx

@@ -214,8 +214,10 @@ export default class AddSeriesModal extends Component {
                                     {card.name}
                                 </span>
                                 { card.dataset_query.type !== "query" &&
-                                    <Tooltip className="px1 flex-align-right" tooltipElement="We're not sure if this question is compatible">
-                                        <Icon className="text-grey-2 text-grey-4-hover cursor-pointer" name="warning" width={20} height={20} />
+                                    <Tooltip tooltip="We're not sure if this question is compatible">
+                                        <span className="px1 flex-align-right">
+                                            <Icon className="text-grey-2 text-grey-4-hover cursor-pointer" name="warning" width={20} height={20} />
+                                        </span>
                                     </Tooltip>
                                 }
                             </li>

frontend/src/query_builder/AggregationWidget.jsx

@@ -81,7 +81,7 @@ export default class AggregationWidget extends Component {
         if (item.aggregation && item.aggregation.description) {
             return (
                 <div className="p1">
-                    <Tooltip tooltipElement={item.aggregation.description}>
+                    <Tooltip tooltip={item.aggregation.description}>
                         <span className="QuestionTooltipTarget" />
                     </Tooltip>
                 </div>
@@ -95,7 +95,7 @@ export default class AggregationWidget extends Component {
         let { tableMetadata } = this.props;
         return (
             <div className="p1">
-                <Tooltip tooltipElement={<QueryDefinitionTooltip object={metric} tableMetadata={tableMetadata} />}>
+                <Tooltip tooltip={<QueryDefinitionTooltip object={metric} tableMetadata={tableMetadata} />}>
                     <span className="QuestionTooltipTarget" />
                 </Tooltip>
             </div>

frontend/src/query_builder/Calendar.jsx

@@ -135,14 +135,14 @@ export default class Calendar extends Component {
                 </div>
                 {this.props.onBeforeClick &&
                     <div className="absolute top left z2" style={{marginTop: "-12px", marginLeft: "-12px"}}>
-                        <Tooltip tooltipElement={"Everything before " + this.props.selected.format("MMMM Do, YYYY")}>
+                        <Tooltip tooltip={"Everything before " + this.props.selected.format("MMMM Do, YYYY")}>
                             <a className="circle-button cursor-pointer" onClick={this.props.onBeforeClick}>«</a>
                         </Tooltip>
                     </div>
                 }
                 {this.props.onAfterClick &&
                     <div className="absolute bottom right z2" style={{marginBottom: "-12px", marginRight: "-12px"}}>
-                        <Tooltip tooltipElement={"Everything after " + this.props.selected.format("MMMM Do, YYYY")}>
+                        <Tooltip tooltip={"Everything after " + this.props.selected.format("MMMM Do, YYYY")}>
                             <a className="circle-button cursor-pointer" onClick={this.props.onAfterClick}>»</a>
                         </Tooltip>
                     </div>

frontend/src/query_builder/FieldList.jsx

@@ -142,7 +142,7 @@ export default class FieldList extends Component {
         let { tableMetadata } = this.props;
         return (
             <div className="p1">
-                <Tooltip tooltipElement={<QueryDefinitionTooltip object={segment} tableMetadata={tableMetadata} />}>
+                <Tooltip tooltip={<QueryDefinitionTooltip object={segment} tableMetadata={tableMetadata} />}>
                     <span className="QuestionTooltipTarget" />
                 </Tooltip>
             </div>

frontend/src/query_builder/filters/pickers/RelativeDatePicker.jsx

@@ -78,7 +78,7 @@ export default class RelativeDatePicker extends Component {
                     <section key={sectionName}>
                         <div style={{}} className="border-bottom text-uppercase flex layout-centered mb2">
                             <h6 style={{"position": "relative", "backgroundColor": "white", "top": "6px" }} className="px2">
-                                {{sectionName}}
+                                {sectionName}
                             </h6>
                         </div>
                         <div className="flex">

frontend/src/query_builder/filters/pickers/SpecificDatePicker.jsx

@@ -78,8 +78,8 @@ export default class SpecificDatePicker extends Component {
                         selected={start}
                         selectedEnd={end}
                         onChange={this.onChange}
-                        onBeforeClick={singleDay && this.toggleOperator.bind(this, "<")}
-                        onAfterClick={singleDay && this.toggleOperator.bind(this, ">")}
+                        onBeforeClick={singleDay ? this.toggleOperator.bind(this, "<") : undefined}
+                        onAfterClick={singleDay ? this.toggleOperator.bind(this, ">") : undefined}
                     />
                     <div className="py2 text-centered">
                         <Input