Custom Tooltip Implementation to Overcome Native title Attribute Limitations
This article explains the shortcomings of the native HTML title attribute for hover text and provides a step‑by‑step guide, with pure HTML/CSS/JavaScript and Vue examples, to create a customizable tooltip that only appears when the text overflows, improving both style and functionality.
In everyday front‑end development we often need to show full hover text, but the native title attribute has two major drawbacks: its style is ugly and cannot be changed, and it always displays the tooltip even when the text does not overflow.
The article first demonstrates the visual differences of the native title tooltip on Windows and macOS, then describes the desired behavior – only show a tooltip when the text exceeds its container, and allow full styling control.
To achieve this, a custom tooltip is built using pure HTML, CSS, and JavaScript. The basic idea is to listen for mouseenter on the target element, create a global div with a fixed position, calculate its coordinates from getBoundingClientRect() , and display the custom styled tooltip. On mouseleave the tooltip element is removed.
<!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">Sample Text</div>
</body>
</html>The JavaScript logic creates the tooltip element, sets its text, and positions it relative to the target:
const titleDom = document.querySelector('.title');
let tipDiv = null;
titleDom.addEventListener('mouseenter', () => {
if (titleDom.scrollWidth <= titleDom.clientWidth) return;
tipDiv = document.createElement('div');
tipDiv.className = 'custom-tooltip';
tipDiv.innerText = '只要肯吃苦，吃得苦中苦，就有吃不完的苦';
document.body.appendChild(tipDiv);
const rect = titleDom.getBoundingClientRect();
const tipRect = tipDiv.getBoundingClientRect();
tipDiv.style.left = rect.left + 'px';
tipDiv.style.top = `${rect.top - tipRect.height - 10}px`;
});
titleDom.addEventListener('mouseleave', () => {
tipDiv?.remove?.();
});The CSS gives the tooltip a modern look and allows customization:
.custom-tooltip {
position: fixed;
padding: 8px 12px;
background: rgba(27,33,41,.8);
color: #fff;
border-radius: 5px;
border: 1px solid rgba(27,33,41,.8);
z-index: 99;
}For Vue projects the same concept is wrapped into a component or a directive. The component uses v-if to toggle the tooltip, while the directive registers mouseenter and mouseleave listeners, injects the tooltip styles, and handles overflow detection.
// src/directives/v-tooltip.js
const tooltipStyles = `
.custom-tooltip {
position: fixed;
padding: 8px 12px;
background: rgba(27,33,41,0.8);
color: #fff;
border-radius: 5px;
border: 1px solid rgba(27,33,41,0.8);
z-index: 99;
}`;
export default {
mounted(el, binding) {
const styleEl = document.createElement('style');
styleEl.innerHTML = tooltipStyles;
document.head.appendChild(styleEl);
let tipDiv = null;
const show = () => {
if (el.scrollWidth <= el.clientWidth) return;
tipDiv = document.createElement('div');
tipDiv.className = 'custom-tooltip';
tipDiv.innerText = binding.value || 'Tooltip text';
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 hide = () => { tipDiv && tipDiv.remove(); };
el.addEventListener('mouseenter', show);
el.addEventListener('mouseleave', hide);
el.__showTooltip__ = show;
el.__hideTooltip__ = hide;
},
unmounted(el) {
el.removeEventListener('mouseenter', el.__showTooltip__);
el.removeEventListener('mouseleave', el.__hideTooltip__);
}
};Both the plain‑HTML version and the Vue directive illustrate how to detect overflow (using scrollWidth > clientWidth ) and conditionally display a fully styled tooltip, offering a more flexible and attractive alternative to the native title attribute.
The article concludes that while the demo covers the essential functionality, further enhancements such as centering the tooltip, theme switching, or deeper component encapsulation can be added based on project needs.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.