当文本内容超出宽度时，超出部分文本内容隐藏，并且用省略号代替；与此同时，鼠标悬停时，有气泡提示效果（文本内容未超出时，没有气泡效果）

一、当我们听到这个需求的时候，我们习惯于给盒子添加一个气泡提示效果，鼠标悬停时即显示。但是，当文本内容没有超出盒子宽度的时候，我们并不希望鼠标悬停时出现气泡效果

//这个时候，无论文本内容是否超出盒子宽度，鼠标悬停时都会产生气泡提示效果
<el-tooltip class="item" effect="dark"  :content="content" placement="top">
   <span>{{content||'-'}}</span>
 </el-tooltip>

二、因此，我们需要判断文本内容是否超出了盒子宽度，然后根据是否超出来显示不同的样式

以下我专门封装了一个组件

<!-- 本内容超出盒子宽度时，文本内容隐藏，并用省略号代替，此时鼠标悬停，出现提示气泡；当文本内容未隐藏时，不出现提示气泡-->
<template>
    <div class="text-tooltip">
        <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
            <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
                <span :ref="refName">{{content||'-'}}</span>
            </p>
        </el-tooltip>
    </div>
</template>

<script>
    export default {
        name: 'textTooltip',
        props: {
            // 显示的文字内容
            content: {
                type: String,
                default: () => {
                    return ''
                }
            },
            // 外层框的样式，在传入的这个类名中设置文字显示的宽度
            className: {
                type: String,
                default: () => {
                    return ''
                }
            },
            // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
            refName: {
                type: String,
                default: () => {
                    return ''
                }
            }
},
data() {
    return {
        isShowTooltip: true
    }
},
methods: {
    onMouseOver(str) {
        let parentWidth = this.$refs[str].parentNode.offsetWidth;
        let contentWidth = this.$refs[str].offsetWidth;
        // 判断是否开启tooltip功能
        if (contentWidth > parentWidth) {
            this.isShowTooltip = false;
            } else {
            this.isShowTooltip = true;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.over-flow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.textWidth {
    width: 100%;
}
p {
    margin: 0;
}
</style>

在父组件中引用组件

<TooltipOver :content="content" class="textWidth" refName="tooltipOver">
    <span class="text">{{content||'--'}}</span>
</TooltipOver> -->

import TooltipOver from "../../../../../components/TooltipOver"

components: {TooltipOver}