API Add buttonTooltop to PopoverField and fix critical positioning issue

admin/client/dist/js/bundle.js

@@ -2378,12 +2378,13 @@ var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e))
 return n.handleShow=n.handleShow.bind(n),n.handleHide=n.handleHide.bind(n),n.state={showing:!1},n}return a(t,e),s(t,[{key:"handleShow",value:function n(){this.setState({showing:!0})}},{key:"handleHide",
 value:function i(){this.setState({showing:!1})}},{key:"render",value:function l(){var e=this.getPlacement(),t=u["default"].createElement(c.Popover,{id:this.props.id+"_Popover",className:"fade in popover-"+e,
 title:this.props.data.popoverTitle},this.props.children),n=["btn","btn-secondary"]
-return this.state.showing&&n.push("btn--no-focus"),this.props.title||n.push("font-icon-dot-3 btn--no-text btn--icon-xl"),u["default"].createElement(c.OverlayTrigger,{rootClose:!0,trigger:"click",container:this,
-placement:e,overlay:t,onEnter:this.handleShow,onExited:this.handleHide},u["default"].createElement("button",{id:this.props.id,type:"button",className:n.join(" ")},this.props.title))}},{key:"getPlacement",
-value:function d(){var e=this.props.data.placement
+this.state.showing&&n.push("btn--no-focus"),this.props.title||n.push("font-icon-dot-3 btn--no-text btn--icon-xl")
+var i={id:this.props.id,type:"button",className:n.join(" ")}
+return this.props.data.buttonTooltip&&(i.title=this.props.data.buttonTooltip),u["default"].createElement(c.OverlayTrigger,{rootClose:!0,trigger:"click",placement:e,overlay:t,onEnter:this.handleShow,onExited:this.handleHide
+},u["default"].createElement("button",i,this.props.title))}},{key:"getPlacement",value:function d(){var e=this.props.data.placement
 return e||"bottom"}}]),t}(f["default"])
 p.propTypes={id:u["default"].PropTypes.string,title:u["default"].PropTypes.any,data:u["default"].PropTypes.oneOfType([u["default"].PropTypes.array,u["default"].PropTypes.shape({popoverTitle:u["default"].PropTypes.string,
-placement:u["default"].PropTypes.oneOf(["top","right","bottom","left"])})])},t["default"]=p},function(e,t,n){"use strict"
+buttonTooltip:u["default"].PropTypes.string,placement:u["default"].PropTypes.oneOf(["top","right","bottom","left"])})])},t["default"]=p},function(e,t,n){"use strict"
 function i(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
 
 

admin/client/src/components/PopoverField/PopoverField.js

@@ -44,13 +44,23 @@ class PopoverField extends SilverStripeComponent {
     if (!this.props.title) {
       buttonClasses.push('font-icon-dot-3 btn--no-text btn--icon-xl');
     }
+
+    const buttonProps = {
+      id: this.props.id,
+      type: 'button',
+      className: buttonClasses.join(' '),
+    };
+    if (this.props.data.buttonTooltip) {
+      buttonProps.title = this.props.data.buttonTooltip;
+    }
+
     return (
-      <OverlayTrigger rootClose trigger="click" container={this}
+      <OverlayTrigger rootClose trigger="click"
         placement={placement} overlay={overlay}
         onEnter={this.handleShow}
         onExited={this.handleHide}
       >
-        <button id={this.props.id} type="button" className={buttonClasses.join(' ')}>
+        <button {...buttonProps}>
           {this.props.title}
         </button>
       </OverlayTrigger>
@@ -75,6 +85,7 @@ PopoverField.propTypes = {
     React.PropTypes.array,
     React.PropTypes.shape({
       popoverTitle: React.PropTypes.string,
+      buttonTooltip: React.PropTypes.string,
       placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
     }),
   ]),

admin/client/src/components/PopoverField/README.md

@@ -17,6 +17,7 @@ is represented by a button.
  * `title` (any): The title to display on the button to open the popover, if left blank it will display an ellipsis icon.
  * `data` (object) (required): Extra data that helps define this field uniquely.
    * `popoverTitle` (string): The title to appear for the popover.
+   * `buttonTooltip` (string): Title for button tooltip.
    * `placement` (string): Where the popover will appear in relation to the button, options available are:
      * top
      * right

src/Forms/PopoverField.php

@@ -38,6 +38,13 @@ class PopoverField extends FieldGroup
      */
     protected $placement = 'bottom';
 
+    /**
+     * Tooltip to put on button
+     *
+     * @var string
+     */
+    protected $buttonTooltip = null;
+
     /**
      * Get popup title
      *
@@ -60,6 +67,24 @@ class PopoverField extends FieldGroup
         return $this;
     }
 
+    /**
+     * @return string
+     */
+    public function getButtonTooltip()
+    {
+        return $this->buttonTooltip;
+    }
+
+    /**
+     * @param string $text
+     * @return $this
+     */
+    public function setButtonTooltip($text)
+    {
+        $this->buttonTooltip = $text;
+        return $this;
+    }
+
     /**
      * Get popup placement
      *
@@ -91,6 +116,7 @@ class PopoverField extends FieldGroup
 
         $schema['data']['popoverTitle'] = $this->getPopoverTitle();
         $schema['data']['placement'] = $this->getPlacement();
+        $schema['data']['buttonTooltip'] = $this->getButtonTooltip();
 
         return $schema;
     }

tests/php/Forms/FormSchemaTest.php

@@ -295,6 +295,7 @@ class FormSchemaTest extends SapphireTest {
 						'placement' => 'bottom',
 						'tag' => 'div',
 						'legend' => null,
+                        'buttonTooltip' => null,
 					],
 					'validation' => [],
 					'children' => [