内容过长被省略时,实现多种tooltip(提示工具)的方式

前言

开发中,为保证界面优美,同时不影响用户体验的情况下,在各场景都会用到tooltip的功能。传统的直接使用ui框架中 Tooltip 文字提示组件的方式,就不赘述了,这里只讲述一些特别的用法。

判断内容是否超出宽度,需要显示tooltip

可以使用@mouseenter方法,通过获取父元素的宽度offsetWidth(包括内容、内边距padding和边框border的宽度),与当前元素宽度做比较,若超出,则显示tooltip。

增加setTimeout定时器可防止出现闪现。

html 复制代码
<a-tooltip :visible="showTooltip" :title="item.content" placement="topLeft">
  <div class="ellipsis-item">
    <span
      @mouseenter="(e) => enterName(e)"
      @mouseleave="leaveName"
    >
      {{ item.content }}
    </span>
  </div>
</a-tooltip>
js 复制代码
enterName(e) {
  //div父元素
  const parentWidth = e.currentTarget.parentNode.offsetWidth;
  //span子元素
  const contentWidth = e.currentTarget.offsetWidth;
  // 子元素>父元素,文字内容超出当前宽度时手动控制气泡框显示
  setTimeout(()=>{
    if (contentWidth > parentWidth) {
      this.showTooltip = true;
    }    
  }, 100)
},
leaveName(){
  setTimeout(()=>{
    this.showTooltip = false;
  }, 200)
}
css 复制代码
.ellipsis-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

实现显示tooltip的方式

1. 表格配置中使用HTML标签

  1. 需要实现在实现vxe-table中的表格时,表头内容过长被省略时显示tooltip的方法,如下效果。

但是在Ant Design Vue中的table组件,并没有能够直接实现tooltip的属性。 因此,可以实现一个比较简单粗暴的方法:直接在列标题中使用HTML的属性title

js 复制代码
<span title="这是123列的提示">123</span>

也可以在methods中,根据每一列的宽度,单独处理需要显示tooltip组件的标题,适应更复杂的场景。

js 复制代码
getColumns(){
  let newArr = JSON.parse(JSON.stringify(this.dataTableHeaders));

  newArr = newArr.map((item) => {
    // 表头显示tooltip
    const name = item.title;
    const titleContent = name.length>13?name:''
    item.title = () => {
      return <a-tooltip placement="top">{name}
        <template slot="title">{titleContent}</template>
      </a-tooltip>
    }
    return item
  });
  return newArr
}

2. attr()创建纯CSS的提示工具

CSS内置函数attr() 用来获取选择到的元素的某一 HTML 属性值, 在伪元素content中用attr()获取标签中data-tooltip属性的值,再加上css动画效果,即可在鼠标悬浮时显示值的内容。

html 复制代码
<p>
    Hover
    <span class="tooltip" data-tooltip="Tooltip Content">Here</span>
    to see the tooltip.
    <br />
    
    You can also hover
    <span class="tooltip" data-tooltip="This is another Tooltip Content"
      >here</span
    >
    to see another example.
</p>
css 复制代码
.tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}

.tooltip:before {
  content: attr(data-tooltip);
  position: absolute;
  width: 100px;
  background-color: #13c2c2;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 1.2;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  font-size: 0.75em;
  visibility: hidden;
}

.tooltip:after {
  content: "";
  position: absolute;
  bottom: 75%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  opacity: 0;
  transition: opacity 1s;
  border-color: #13c2c2 transparent transparent transparent;
  visibility: hidden;
}

.tooltip:hover:before,
.tooltip:hover:after {
  opacity: 1;
  visibility: visible;
}

优点:

  1. 不受限制:自定义外观和行为,使工具提示与网站或应用程序的设计完全匹配
  2. 提升网页性能:不依赖任何第三方库或框架,加载速度更快

缺点: 需要在文本内容过长时,增加属性会比较麻烦。

js 复制代码
const targetElement = document.getElementsByClassName('#tooltip'); // 替换为实际选择器 
targetElement.setAttribute('data-tooltip', 'Tooltip Content');
相关推荐
zhougl99633 分钟前
html处理Base文件流
linux·前端·html
花花鱼36 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_39 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript