demand

The button is disabled to display the tooltip

The wrong case

Wrap the button directly with the tooltip

<el-tooltip placement="top" :disabled="tooltipDisabled" content="Button disabled needs to show tooltip">
    <el-button style="margin-bottom:10px" :disabled="btnDisabled" type="primary" size="small" @click="handleEdit">Upload script</el-button>
</el-tooltip>
Copy the code

To solve

You can use disabled in tooltip to control whether a tooltip can be wrapped around a button with a div. And the width is the same as the button size (I used 80px width here)

The code is as follows:

<el-tooltip placement="top" :disabled="tooltipDis" content="The number of script versions cannot exceed five. Delete unused scripts and upload them again.">
  <div style="width:80px">
    <el-button style="margin-bottom:10px" :disabled="upLoadDisabled" type="primary" size="small" @click="handleEdit">Upload script</el-button>
  </div>
</el-tooltip>
Copy the code

How do I display tooltips if a Button is disabled