How to make a tooltip pop out of it's container

Question

I'd like my tooltip to pop out of it's container, but unfortunately it gets clipped off. Any suggestions about styling that would give me my desired result:

My actual result:

My code:

    var helpTextIcon = null;
    var helpTextPopover = null;

    if(this.props.fieldDescribe.helpText != null) {

        if(true) {
            helpTextPopover = 
                <div className="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" style={{position: "absolute", bottom: 30, left: -15, width: 300}} id={this.props.fieldDescribe.apiName}>
                    <div className="slds-popover__body">
                        {this.props.fieldDescribe.helpText}
                    </div>
                </div>;
        }                


        helpTextIcon = 
            <div className="slds-form-element__icon">
                <button className="slds-button slds-button_icon" onMouseEnter={this.showHelpText} onMouseLeave={this.hideHelpText} aria-describedby={this.props.fieldDescribe.apiName}>
                    <svg aria-hidden="true" className="slds-icon slds-icon-text-default slds-icon_x-small">
                        <use href={sldsPath + "/assets/icons/utility-sprite/svg/symbols.svg#info"} />
                    </svg>
                    <span className="slds-assistive-text">Help</span>
                </button>
                {helpTextPopover}
            </div>;
    }