显示来自数组的工具提示中的消息答案

【问题标题】：Display the messages in the tool-tip from an array显示来自数组的工具提示中的消息
【发布时间】：2019-03-09 10:55:03
【问题描述】：

我是前端和 javascript 的新手。我正在使用反应 js 。这里，我有一个按钮，就像 ->

<div className="fetchBtnDiv mx-auto" data-toggle="tooltip" data-placement="right"  title={this.generateToolTipMessage(this.state.hasAllFieldsFilld, this.state.hasAllHLowFieldsFilled, this.state.hasAllMidFieldsFilled)}>
                    <button className="btn btn-primary fetchBtnSize" disabled={(this.state.disableFetch || this.state.disableHighetch || this.state.disableMidFetch) || ( this.state.hasAllFieldsFilld ) || ( this.state.hasAllHLowFieldsFilled ) || ( this.state.hasAllMidFieldsFilled )}>Fetch Questions</button>
                </div>

现在，在工具提示上，我必须向用户显示一些消息，所以我编写了一个类似的函数，

generateToolTipMessage(highData, lowData, mediumData) {
        let errorMessages = [];
        if(highData) {
            errorMessages.push("Please fill all the details in the High Level Criteria");
        } 
        if(lowData) {
            errorMessages.push("Please fill all the details in the Low Level Criteria");
        }
        if(mediumData) {
            errorMessages.push("Please fill all the details in the Medium Level Criteria");
        }
        return errorMessages;
    }

现在，就像，一次可以有 3 条消息，或者 2 条，也可以是 1 条。所以，现在我想向用户展示这条消息。

我没有办法做到这一点？任何人都可以建议我如何做到这一点？谢谢。任何提示都会有所帮助。

【问题讨论】：

标签： javascript reactjs tooltip

【解决方案1】：

state={
errors: '',
}

onMouseOverEventTriggered = () => {
       let errorMessages = [];
       if(highData) {
        errorMessages.push("Please fill all the details in the High Level Criteria");
       } 
          if(lowData) {
        errorMessages.push("Please fill all the details in the Low Level Criteria");
        }
        if(mediumData) {
        errorMessages.push("Please fill all the details in the Medium Level 
       Criteria");
    }
  this.setState({
  errors: errorMessages,
  })
}

现在是 Html 部分

 <div className="fetchBtnDiv mx-auto" data-toggle="tooltip" data-placement="right"  
   title={this.state.errors} onMouseOver={this.onMouseOverEventTriggered}>
                <button className="btn btn-primary fetchBtnSize" disabled= 
    {(this.state.disableFetch || this.state.disableHighetch || 
   this.state.disableMidFetch) 
    || ( this.state.hasAllFieldsFilld ) || ( this.state.hasAllHLowFieldsFilled ) || ( 
    this.state.hasAllMidFieldsFilled )}>Fetch Questions</button>
            </div>

【讨论】：