Definition:
A tooltip is a small pop-up message box that appears when you hover your mouse pointer or focus (via keyboard) on text, an image, or any element.
Its primary purpose is to display short, contextual information or guidance about that element without cluttering the interface.
It can also appear inside input boxes; for example, when you fill out a form incorrectly or require additional instructions, a tooltip box may appear (if the tooltip feature is enabled).
HTML trigger uses a <button> or any element with data-tip attribute, and CSS pseudo-elements ::after & ::before show the tooltip and arrow.
Syntax:
HTML:
<button class="tooltip" data-tip="Click to copy text">Copy</button>
CSS:
.tooltip {
position: relative;
padding: 10px 15px;
border-radius: 6px;
cursor: pointer;
background: #4CAF50;
color: white;
font-weight: 600;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
background: #ff5722;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.tooltip::before {
content: "";
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #ff5722;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover::after,
.tooltip:hover::before {
opacity: 1;
}
Example:
<button class="tooltip" data-tip="Click to copy text">Copy</button>
Output: