原生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属性重写，让同事对你刮目相看

原生title属性的弊端

为什么不使用第三方组件

实现思路

技术方案

原生html

基础框架

完善mouseenter方法

完善mouseleave方法

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

完整代码

封装成一个方法

优化项

vue框架中实现

封装成一个组件

封装成一个指令

定义自定义指令

注册指令

使用指令

总结

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

原生title属性的弊端

为什么不使用第三方组件

实现思路

技术方案

原生html

基础框架

完善mouseenter方法

完善mouseleave方法

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

完整代码

封装成一个方法

优化项

vue框架中实现

封装成一个组件

封装成一个指令

定义自定义指令

注册指令

使用指令

总结

热门文章

最新文章

相关电子书

相关实验场景