The el-tooltip component itself is the suspension prompt function, in the second encapsulation of it, it should be optimized to realize the extra text and prompt, not give prompt.

  1. Add an intermediate layer, subset is full data, control the style of the middle layer, and set the width, through the ref width comparison, if the subset is wider than the middle layer, it indicates that… style
<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: {// Display text content: {type: String, default: () => {return ''}}, // set the width of the text display in the className className: {type: String, default: RefName: {type: String, default: {type: String, default: {type: String, default: {type: String, default: () => { return '' } } }, data() { return { isShowTooltip: true } }, methods: { onMouseOver(str) { let parentWidth = this.$refs[str].parentNode.offsetWidth; let contentWidth = this.$refs[str].offsetWidth; 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; } .wid190 { width: 100%; } p{ margin: 0; } </style>Copy the code
  1. In pages where components are needed
import tooltipOver from './components/tooltipOver'
Copy the code
  1. Using the component
<tooltip-over
    :content="tipText"
    class="wid190"
    refName="tooltipOver"
></tooltip-over>
Copy the code

Tip: When components are used more than once on the same page, you need to define different refName attributes

Thank you for blog www.cnblogs.com/97pkp/p/128…

Here’s another idea:

Text needs to be processed in case of text overflow. Text that overflows the container displays an ellipsis relative to the height of the container, while mouse over displays the detailed contents of the text by displaying tooltips. For details, please see www.jianshu.com/p/239d0d446…

If this article is helpful to you, thank you for a free careful heart, your support is the biggest motivation for my progress!