原生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参考地址：https://juejin.cn/post/7388753413309349903（文末链接）

云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版本的，请留言，我根据评论情况添加。

关注我！前端不迷路！

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