1

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:

enter image description here

My actual result:

enter image description here

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>;
    }
1
  • 1
    I ended up abandoning using the tool-tip styled box and simply used the title attribute on the 'button'.. it was an easy work around, but if anyone knows the proper way to use the tooltip correctly please update the answer – Shuaib Ahmed Jun 15 '18 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.