Perfect Tooltips With CSS Clipping and Masking

In this post Louis Hoebregts creates nice tooltips. No, not a typical triangle injected at the bottom but a nice curved one, also letting the image underneath peek through.

For it he uses mask-image consisting of two parts: one rectangle overlaying the top part of the image + one SVG arrow overlaying the bottom part.

.tooltip {
    linear-gradient(#fff, #fff), /* Rectangle */
    url('data:image/svg+xml;utf8,'); /* Bottom  arrow */
    0 0, /* Rectangle */
    50% 100%; /* Bottom arrow */
    100% calc(100% - 18px), /* Rectangle */
    38px 18px; /* Bottom arrow */
  mask-repeat: no-repeat;

See the Pen
Idea #3 – Responsive complex clipping in CSS
by Louis Hoebregts (@Mamboleoo)
on CodePen.

Cranking it up a notch he even creates some nice looking message bubbles.

Perfect Tooltips With CSS Clipping and Masking →

Easy Textures with CSS Masks


.grit {
 -webkit-mask-image: url("grit.png");
 mask-image: url("grit.png");

With the image above, the areas with partial and full transparency will mask the element (allowing the background to show through), while fully opaque areas (of any color) will allow the element to be visible.

Then simply apply it as a mask image in CSS with only 2 lines of code!

Easy Textures with CSS Masks →