Mastering Tooltip Design: From CSS Clip‑Path to SVG Path Solutions

Introduction

Tooltips (also called hint boxes) provide interactive prompts. This article focuses on reproducing their visual appearance across various UI styles.

Background

Typical tooltip UI includes bordered, solid, shadowed, gradient, and rounded‑corner variants, which can be challenging to implement with pure CSS.

Clip‑Path Solution

Using CSS clip-path to split the tooltip into a rectangle and a triangle, then combine them with a polygon() definition. The article lists coordinate calculations (d1‑d8) based on tooltip size w×h and border thickness h1. Example CSS is provided.

clip-path: polygon(
    0 0,
    calc(50% - 4px) 0,
    calc(50% - 7px) 2px,
    calc(50% + 7px) 2px,
    calc(50% + 4px) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0);

The approach works but may produce gaps or overlaps at the seam, especially when combined with gradients, shadows, or transparent borders.

SVG Path Solution

SVG path commands handle borders, shadows, gradients, and complex shapes more reliably. Advantages include easy handling of transparency, small code size, and better maintainability.

Key SVG commands are listed (M, L, H, V, C, Q, etc.). Example of a quadratic Bézier tooltip corner:

<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

Background transparency is set with fill: rgba(0,0,0,.3), and shadows are applied via filter: drop-shadow(2px 4px 6px black). Linear and radial gradients are demonstrated with defs and linearGradient.

Bezier Curves

Quadratic and cubic Bézier curves are used to create smooth rounded corners. The article explains the construction of a quadratic curve using control points p0, p1, p2 and provides the mathematical formula.

Visual Tool

A D3.js‑based visual editor generates SVG path data for arbitrary tooltip shapes, allowing designers to adjust arrow height, width, and corner radius without manual calculations.

Conclusion

Combining SVG path with the visual tool satisfies complex tooltip requirements that CSS clip‑path cannot handle, covering shadows, gradients, borders, and custom arrow shapes.