Skip to main content

A border-only Tooltip using mask

Create a border-only Tooltip with a few lines of code

A border-only tooltip with gradient coloration

.tooltip {
--r: 30px; /* border radius*/
--b: 8px; /* border length */
--s: 55px; /* arrow size */
--a: 90deg; /* angle of the arrow */
--c: linear-gradient(60deg,#E84A5F,#355C7D);

max-width: 410px;
font-size: 20px;
padding: calc(var(--r) + var(--b));
position: relative;
font-weight: bold;
font-family: sans-serif;
.tooltip::before {
content: "";
position: absolute;
inset: calc(-1*var(--s));
border-radius: calc(var(--r) + var(--s));
border: var(--s) solid #0000;
padding: var(--b);
background: var(--c) border-box;
--_m:/100% var(--s) no-repeat conic-gradient(from calc(var(--a)/-2),#000 var(--a),#0000 0),
linear-gradient(#000 0 0);
50% calc(100% - var(--b)) var(--_m) content-box,
bottom var(--_m) padding-box;
mask-composite: exclude;

See the Pen Border-only Tooltip with a gradient coloration by Temani Afif (@t_afif) on CodePen.