Want a clean tooltip bubble with a small directional arrow using only CSS? Below you’ll learn two reliable methods and how to center content inside the shape.
Live Preview: Tooltip (Bottom Arrow)
Method 1: Tooltip with Pseudo-Element Border Triangle
/* Bottom arrow using a classic border triangle */
.tooltip {
position: relative;
width: 160px;
padding: 12px 14px;
background: #cd5454;
color: #fff;
border-radius: 8px;
}
/* Arrow points downward and sits on the bottom center */
.tooltip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border-width: 0 8px 10px 8px; /* height:10px, width:16px */
border-style: solid;
border-color: transparent transparent #cd5454 transparent;
}Method 2: Tooltip via clip-path (Single Element)
/* Single element with a bottom-centered arrow cutout */
.tooltip-clip {
width: 180px;
min-height: 80px;
padding: 12px 16px;
display: inline-block;
background: #cd5454;
color: #fff;
border-radius: 10px;
/* Arrow created by polygon points at bottom center */
clip-path: polygon(
0 0, 100% 0, 100% 75%,
58% 75%, 50% 100%, 42% 75%,
0 75%
);
}How This Works
The pseudo-element method draws the arrow with a 0×0 element that uses CSS borders to create a triangle. By coloring only the bottom border and positioning it at the container’s bottom center, you get a crisp directional pointer.
The clip-path method trims the element into a tooltip silhouette (rounded box + bottom arrow) using polygon coordinates. It’s a single element with no extra markup, which is handy for inline previews or when you can’t use pseudo-elements.
How to Center Content Inside a Tooltip
The easiest approach is to turn the tooltip container into a Flexbox or Grid formatting context so its children are perfectly centered horizontally and vertically.
Method 1: Use CSS Flexbox
.tooltip,<br>.tooltip-clip {<br> display: flex;<br>
justify-content: center; /* horizontal */<br> align-items: center;
/* vertical */<br> text-align: center;
/* nice for multi-line text */<br> min-height: 80px;
/* ensure enough space for text */<br>}Method 2: Use CSS Grid
.tooltip,
.tooltip-clip {
display: grid;
place-items: center; /* centers both axes */
text-align: center;
min-height: 80px;
}
When to Use Each Shape Method
Use the pseudo-element border triangle when you want simple, widely supported arrows that are easy to resize independently of the bubble. Use clip-path when you prefer a single-element tooltip or need more complex silhouettes; note that clip-path offers great control but may require careful testing for older browsers.
Quick Customizations
Change the color by editing background: #cd5454; and the arrow’s border color to match. Add a border or outline (e.g., outline: 2px solid #fff;) for contrast, or tweak the arrow size by adjusting the border-width (pseudo-element) or polygon percentages (clip-path).
Accessibility & SEO
Provide sufficient color contrast and use appropriate ARIA attributes (e.g., role=tooltip with aria-describedby on the trigger) so screen readers can associate the tooltip with its control.