Exploded tree icon and on-hover info box

src/components/controls/choose-explode-attr.js

@@ -1,10 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withTranslation } from 'react-i18next';
-import { FaWrench } from "react-icons/fa";
-
+import { ImLab } from "react-icons/im";
 import { explodeTree } from "../../actions/tree";
-import { SidebarSubtitle } from "./styles";
+import { SidebarSubtitle, StyledTooltip } from "./styles";
 import { controlsWidth } from "../../util/globals";
 import CustomSelect from "./customSelect";
 
@@ -38,9 +37,16 @@ class ChooseExplodeAttr extends React.Component {
     const selectOptions = this.gatherAttrs();
     return (
       <div style={{paddingTop: 5}}>
-        <SidebarSubtitle>
-          <FaWrench style={{ marginRight: "5px" }}/>
+        <SidebarSubtitle data-tip data-for="explode_tree">
+          <ImLab style={{ marginRight: "5px" }}/>
           {t("sidebar:Explode Tree By")}
+          <StyledTooltip offset={{left: 50}} place="bottom" type="dark" effect="solid" id="explode_tree">
+            <>This functionality is experimental and should be treated with caution!
+              <br/>Exploding a tree by trait X means that for each branch where the trait changes value, we will
+              prune off the branch and create a separate (sub)tree.
+              It works best when the trait doesn&apos;t change too value too frequently.
+            </>
+          </StyledTooltip>
         </SidebarSubtitle>
         <div style={{width: controlsWidth, fontSize: 14}}>
           <CustomSelect