写一个组件，给容器一个指定的宽度，当内容超出容器宽度时显示el-tooltip的文本提示

在 Vue 中，你可以创建一个名为 `ExpandableContent` 的自定义组件，当内容超出容器宽度时显示一个 El-Tooltip 提示。下面是一个基本的实现：

<template>
  <div :style="{ maxWidth: containerWidth + 'px' }">
    <span v-if="content.length <= containerWidth">{{ content }}</span>
    <el-tooltip :content="content" placement="right" :width="tooltipWidth" :open="shouldShowTooltip" />
  </div>
</template>

<script>
export default {
  name: "ExpandableContent",
  props: {
    content: {
      type: String,
      required: true,
    },
    containerWidth: {
      type: Number,
      required: true,
    },
    tooltipWidth: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      shouldShowTooltip: false,
    };
  },
  watch: {
    content(newContent) {
      if (newContent.length > this.containerWidth) {
        this.shouldShowTooltip = true;
      } else {
        this.shouldShowTooltip = false;
      }
    },
  },
  methods: {
    toggleTooltip() {
      this.shouldShowTooltip = !this.shouldShowTooltip;
    },
  },
};
</script>

<style scoped>
.expandable-content {
  position: relative;
}

.el-tooltip.right {
  top: auto;
  bottom: 100%;
}
</style>

这个组件有以下几个部分：

1. 容器有一个最大宽度限制 (`maxWidth`)，并根据 `containerWidth` 属性计算设定。
2. 如果内容长度小于等于容器宽度，直接展示内容。
3. 如果内容过长，开启 El-Tooltip 并将其内容设置为 `content`。
4. 使用 `watch` 监听内容变化，当内容长度超过容器宽度时，显示 tooltip；反之则隐藏。
5. 提供了一个 `toggleTooltip` 方法，用于手动打开或关闭 tooltip。