设置el-tooltip的宽高

### 设置 Element UI `el-tooltip` 组件的宽度和高度

为了实现自定义 `el-tooltip` 的尺寸，可以通过 CSS 类名来控制样式。Element UI 提供了多种方式来自定义工具提示框的外观。

#### 方法一：通过内联样式或类名设置固定大小

可以直接在模板中为 `el-tooltip` 添加 `:content-style` 属性指定宽高：

<template>
  <div class="custom-tooltip">
    <el-tooltip :content-style="{ width: '200px', height: 'auto' }" effect="dark" content="这是一个很长的文字说明，用于测试tooltip是否会自动换行并适应新设定的高度">
      <button>悬停查看</button>
    </el-tooltip>
  </div>
</template>

<style scoped>
.custom-tooltip .el-tooltip__popper {
  max-width: none; /* 取消默认最大宽度 */
}
</style>

这种方法适用于希望给定特定数值的情况[^1]。

#### 方法二：利用全局样式覆盖默认样式

如果项目中有多个地方需要用到相同样式的 `el-tooltip` ，可以在项目的公共样式文件里统一修改 `.el-tooltip__popper` 类的选择器:

/* common.css 或者 style.less 文件下 */

.el-tooltip__popper.is-dark { /* 如果是浅色主题则去掉 is-dark */
  min-width: 200px !important;
  padding: 8px 16px;
}

.el-tooltip__popper[x-placement^=top] .popper__arrow::after,
.el-tooltip__popper[x-placement^=bottom] .popper__arrow::after {
  border-top-color: transparent!important;
  border-bottom-color: transparent!important;
}

此方法可以确保整个应用中的所有 `el-tooltip` 都遵循相同的布局规则。

#### 方法三：基于 JavaScript 动态调整

对于更复杂的需求，比如根据内容长度动态改变弹窗大小，可以监听事件并通过 JS 修改 DOM 结构或者使用计算属性绑定 inline styles :

// 假设在一个 Vue 单文件组件中
export default {
  data() {
    return {
      tooltipStyle: {}
    };
  },
  methods: {
    updateTooltipSize(event) {
      const targetWidth = event.target.offsetWidth;
      this.tooltipStyle = { maxWidth: `${targetWidth}px`, maxHeight: 'fit-content'};
    }
  }
};

配合 HTML 如下所示：

<el-tooltip placement="right" popper-class="dynamic-size-tip"
            v-bind:content-style="tooltipStyle"
            @mouseenter.native="updateTooltipSize">
  <!-- ... -->
</el-tooltip>

这种方式提供了更大的灵活性，允许开发者依据具体场景定制行为逻辑[^2]。