快收藏!超实用标签title属性重写,让同事对你刮目相看

2,076 阅读5分钟

往期精彩文章:

用云编译器半小时完成轮播组件紧急开发!被公司奖励500!

直接使用git pull拉取代码,被同事狠狠地diss了!

原生title属性的弊端

日常开发中,我们经常会遇到hover文本,显示其全部内容的需求。但是原生的title属性有两个很大的缺点

  • 样式丑陋,无法更改

windows下的样式

mac下的样式

  • 不够智能,属性显影只能人为控制

只要写了title属性,hover文本一定会展示。但有些场景,我们需要的功能是,文本超出后,才显示title属性;文本不超出后,不显示title属性。

如图,我们期望的是,被圈起来的部分,hover文本后出现title属性的提示;为圈起来的文字不需要title提示。

但是,title属性很难用,一旦你写了,它永远都会hover显示。

那么,针对上述问题,本文将对title属性进行优化,模拟实现一个更好用的title属性,它具备下面的功能。

  • 样式好看(支持自定义):

  • 仅超出的文本显示title提示:

相信阁下使用后,一定会让你们的同事领导对你刮目相看,想起他们故乡的妈妈桑!

为什么不使用第三方组件

有人一定会问,为什么不使用elementPlus的toolTip组件

我的回答是:

  • 项目中没有或不能引入其他UI库
  • 它的样式不满足我的需求
  • 我想实现一些个性化功能

如果还有人和我杠,我就一句话: 我就想手搓一个,我乐意!

实现思路

首先,我们要明确的是,重写原生标签的 title 属性样式在纯 HTML 和 CSS 中是不可能的。不过,我们需要使用自定义的提示框(tooltip)来实现类似的效果,并对其样式进行完全控制。

大致思路就是:获取文本的鼠标hover位置,全局创建一个div盒子,用fixed布局浮动显示。

本文只抛砖引玉,做基础的代码演示,方便各位读者阅读。大家可以根据业务情况自行完善。

为了提升大家的学习效果,大家可以使用云VCSODE运行下面的demo代码。

云vscode参考地址:juejin.cn/post/738875…(文末链接)

云vscode免配任何环境,可快速运行demo。

技术方案

我们对下面的代码模拟hover实现title属性,hover提示:只要肯吃苦,吃得苦中苦,就有吃不完的苦

原生html

<div class="title">
  奥德彪语录
</div>

我们的大致方案是,hover时(mouseenter),获取当前dom元素,计算出它的位置。然后创建一个全局div,自定义一些样式,写入文本。鼠标 离开时,销毁当前元素。

基础框架

大致的逻辑框架代码如下:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Tooltip</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="title" onmouseenter="createTip">奥德彪语录</div>
</body>

<script>
const titleDom = document.querySelector('.title');
let tipDiv= null
titleDom.addEventListener('mouseenter', ()=>{
  // 创建一个tip提示div
  tipDiv = document.createElement('div');

})
titleDom.addEventListener('mouseleave', ()=>{
  // 销毁tip提示div
})


</script>
</html>

完善mouseenter方法

const titleDom = document.querySelector('.title');
let tipDiv= null
titleDom.addEventListener('mouseenter', ()=>{
  // 创建一个tip提示div
  tipDiv = document.createElement('div');
  tipDiv.className = 'custom-tooltip';
  tipDiv.innerText = '只要肯吃苦,吃得苦中苦,就有吃不完的苦';
  document.body.appendChild(tipDiv);
  // 计算tip提示框的位置
  // 获取 titleDom 元素的边界矩形信息
  const rect = titleDom.getBoundingClientRect();
  // 获取 tipDiv 元素的边界矩形信息
  const tipRect = tipDiv.getBoundingClientRect();
  tipDiv.style.left = rect.left +'px';
  tipDiv.style.top = `${rect.top - tipRect.height -10}px`;
})

我们完善一下custom-tooltip的样式

<style>
  .title{
    margin: 100px;
  }
  .custom-tooltip{
    position: fixed;
    padding: 8px 12px;
    background: rgba(27, 33, 41, .8);
    color: #ffffff;
    border-radius: 5px;
    border: 1px solid rgba(27, 33, 41 .8);
    z-index: 99;
  }
</style>

试试效果,看起来还不错。

完善mouseleave方法

现在,我们实现离开dom,移除tip提示的效果。

titleDom.addEventListener('mouseleave', ()=>{
  // 销毁tip提示div
  tipDiv.remove();
})

完善文本超出才显示tip效果

要想实现这个效果,首先我们需要判断文本是否超出显示。如果超出,hover显示tips提示,否则不显示。

先改造样式,让文本超出显示...

.title{
  margin: 100px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

现在hover,文本一定是一直显示的。

判断文本是否超出其容器,可以通过比较文本内容的实际尺寸和容器的尺寸来实现。

const titleDom = document.querySelector('.title');

if (titleDom.scrollWidth > titleDom.clientWidth) {
  console.log('文本超出');
} else {
  console.log('文本没有超出');
}

那么,代码的修改就非常容易了

titleDom.addEventListener('mouseenter', ()=>{
  if (titleDom.scrollWidth <= titleDom.clientWidth) {
    return
  } 
  // ...原来的逻辑
})
titleDom.addEventListener('mouseleave', ()=>{
  // 销毁tip提示div 兼容写法
  tipDiv?.remove?.();
})

完整代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Tooltip</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      .title{
        margin: 100px;
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .custom-tooltip{
        position: fixed;
        padding: 8px 12px;
        background: rgba(27, 33, 41, .8);
        color: #ffffff;
        border-radius: 5px;
        border: 1px solid rgba(27, 33, 41 .8);
        z-index: 99;
      }
    </style>
</head>
<body>
    <div class="title">奥德彪语录</div>
</body>

<script>
const titleDom = document.querySelector('.title');
let tipDiv= null
titleDom.addEventListener('mouseenter', ()=>{
  if (titleDom.scrollWidth <= titleDom.clientWidth) {
    return
  } 
  // 创建一个tip提示div
  tipDiv = document.createElement('div');
  tipDiv.className = 'custom-tooltip';
  tipDiv.innerText = '只要肯吃苦,吃得苦中苦,就有吃不完的苦';
  document.body.appendChild(tipDiv);
  // 计算tip提示框的位置
  // 获取 titleDom 元素的边界矩形信息
  const rect = titleDom.getBoundingClientRect();
  // 获取 tipDiv 元素的边界矩形信息
  const tipRect = tipDiv.getBoundingClientRect();
  tipDiv.style.left = rect.left +'px';
  tipDiv.style.top = `${rect.top - tipRect.height -10}px`;
})
titleDom.addEventListener('mouseleave', ()=>{
  // 销毁tip提示div
  tipDiv?.remove?.();
})


</script>
</html>

封装成一个公用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tooltip Component</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script>
        class Tooltip {
            constructor(titleDom, text) {
                this.titleDom = titleDom;
                this.text = text;
                this.tipDiv = null;
                this.titleDom.addEventListener('mouseenter', () => {
                    this.show();
                });
                this.titleDom.addEventListener('mouseleave', () => {
                    this.hide();
                });
            }

            show() {
                if (this.titleDom.scrollWidth <= this.titleDom.clientWidth) {
                    return;
                }
                this.tipDiv = document.createElement('div');
                this.tipDiv.className = 'custom-tooltip';
                this.tipDiv.innerText = this.text;
                document.body.appendChild(this.tipDiv);
                const rect = this.titleDom.getBoundingClientRect();
                const tipRect = this.tipDiv.getBoundingClientRect();
                this.tipDiv.style.left = `${rect.left}px`;
                this.tipDiv.style.top = `${rect.top - tipRect.height - 10}px`;
            }

            hide() {
                if (this.tipDiv) {
                    this.tipDiv.remove();
                }
            }
        }

        const titleDom = document.querySelector('.title');
        const tooltip = new Tooltip(titleDom, '只要肯吃苦,吃得苦中苦,就有吃不完的苦');
    </script>
</body>
</html>

优化项

对于这个demo其实还有很多优化项,比如

  • 如何让控制tip的位置居中
  • 主题设置(黑白主题)

由于原生html用的很少,这里只简单展示一些技术思路,其他效果大家自行实现。

vue框架中实现

封装成一个组件

在vue中实现就简单很多了,比如,我们可以像下面一样简单粗暴,直接控制tooltip文本的显示隐藏即可。

<template>
  <div class="title-wrapper" @mouseenter="showTooltip" @mouseleave="hideTooltip">
    <div class="title">{{title}}</div>
    <span v-if="showTooltipFlag" class="tooltip">{{tooltipText}}</span>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  title: String,
  tooltipText: String
});

const showTooltipFlag = ref(false);

function showTooltip() {
    if (this.titleDom.scrollWidth <= this.titleDom.clientWidth) {
      return;
    }
    showTooltipFlag.value = true;
}

function hideTooltip() {
    showTooltipFlag.value = false;
}
</script>

<style scoped>
.title-wrapper{
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}

.title{
  margin: 100px;
}

.tooltip{
  position: absolute;
  padding: 8px 12px;
  background: rgba(27, 33, 41,.8);
  color: #ffffff;
  border-radius: 5px;
  border: 1px solid rgba(27, 33, 41.8);
  z-index: 99;
  white-space: normal;
  top: -30px;
  left: 0;
  width: 200px;
  pointer-events: none;
}
</style>

如果你觉得这种组件的形式不够优雅,我们可以直接封装成一个vue指令。

封装成一个指令

定义自定义指令

v-tooltip.js 中定义自定义指令,并将样式动态添加到页面。

// src/directives/v-tooltip.js
const tooltipStyles = `
.custom-tooltip {
  position: fixed;
  padding: 8px 12px;
  background: rgba(27, 33, 41, 0.8);
  color: #ffffff;
  border-radius: 5px;
  border: 1px solid rgba(27, 33, 41, 0.8);
  z-index: 99;
}
`;

function addTooltipStyles() {
  const styleElement = document.createElement('style');
  styleElement.innerHTML = tooltipStyles;
  document.head.appendChild(styleElement);
}

export default {
  mounted(el, binding) {
    addTooltipStyles();
    
    let tipDiv = null;

    const showTooltip = () => {
      if (el.scrollWidth <= el.clientWidth) {
        return;
      }
      tipDiv = document.createElement('div');
      tipDiv.className = 'custom-tooltip';
      tipDiv.innerText = binding.value || '只要肯吃苦,吃得苦中苦,就有吃不完的苦';
      document.body.appendChild(tipDiv);
      const rect = el.getBoundingClientRect();
      const tipRect = tipDiv.getBoundingClientRect();
      tipDiv.style.left = `${rect.left}px`;
      tipDiv.style.top = `${rect.top - tipRect.height - 10}px`;
    };

    const hideTooltip = () => {
      if (tipDiv) {
        tipDiv.remove();
        tipDiv = null;
      }
    };

    el.addEventListener('mouseenter', showTooltip);
    el.addEventListener('mouseleave', hideTooltip);

    el.__showTooltip__ = showTooltip;
    el.__hideTooltip__ = hideTooltip;
  },
  unmounted(el) {
    el.removeEventListener('mouseenter', el.__showTooltip__);
    el.removeEventListener('mouseleave', el.__hideTooltip__);
  }
};
注册指令

main.js 中注册这个自定义指令。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import vTooltip from './directives/v-tooltip';

const app = createApp(App);

app.directive('tooltip', vTooltip);

app.mount('#app');
使用指令

在你的组件中使用这个自定义指令。

<!-- src/components/TooltipExample.vue -->
<template>
  <div class="title" v-tooltip="'只要肯吃苦,吃得苦中苦,就有吃不完的苦'">
    奥德彪语录
  </div>
</template>

<style scoped>
.title {
  margin: 100px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

总结

本文介绍了原生title属性的一些优化思路和方法,相信对大家有一定帮助。由于时间问题,本文没有做组件或指令的深度封装,比如提示框出现的位置等等还不支持个性化自定义位置等等。但是,基于demo,已经达到项目可用的地步了,大家可以基于自己的项目自行完善。

如果你很懒,想让我帮你实现更多具体功能,请评论区留言,我会抽空完善上述代码,增加更过功能。如果有人想要react版本的,请留言,我根据评论情况添加。

关注我!前端不迷路!