A border-only Tooltip using mask
Create a border-only Tooltip with a few lines of code
- One element
- Less than 20 CSS declarations
- Support gradient coloration
- Support
border-radius
- Optimized with CSS variables
.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);
mask:
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.