Excellent Tooltips With CSS Clipping and Masking

No Comments

Clipping and masking have been round for some time now in CSS and even have fairly first rate browser assist. I not too long ago labored on a undertaking that wanted to make use of a clipping method for tooltips displaying above hyperlinks in textual content.

These tooltips have two designs primarily based on their content material:

One design is a tooltip that incorporates plain textual content towards a strong background.
The opposite design permits a picture to cowl the complete house.

You may not suppose the textual content tooltip requires any clipping in any respect. A pseudo-element might be positioned on the backside so as to add the little notch, proper? You’re certainly completely proper! As a result of the background of the tooltip is a a plain shade, there’s actually no want for CSS trickery and whatnot.

However clipping the picture within the second design is the place issues get fascinating…

Right here’s the thought course of my thoughts adopted once I began the duty.

Thought 1: clip-path & polygon

The CSS clip-path property permits us to outline a customized polygon with share values to make the trail we would like.
This resolution is commonly sufficient if the form of your path is easy sufficient. Within the demo beneath, I’m utilizing calc() values to ensure the clip is totally responsive, whereas the little triangle stays the identical measurement regardless of how stretched the mum or dad is.

.tooltip {
clip-path: polygon(
0% 0%, // High left level
100% 0%, // High proper level
100% calc(100% – 10px), // Backside proper level
calc(50% + 10px) calc(100% – 10px), // Heart proper of the triangle
50% 100%, // Tip of the triangle
calc(50% – 10px) calc(100% – 10px), // Heart left of the triangle
0% calc(100% – 10px) // Backside left level
);
}

CodePen Embed Fallback

This resolution could be very clear however, in my case, not adequate as I don’t have a straight triangle notch, however moderately a customized form.

Thought 2: clip-path and SVG

Utilizing an SVG path appeared like resolution. First, you export your SVG clipping path, then use it in your CSS with the url(#clipPathId) worth.

Verify the demo beneath. Do you see any subject with the trail?

CodePen Embed Fallback

The arrow is stretched primarily based on the picture ratio. For the reason that little notch is a part of the entire path form, it’s as stretched because the rectangle a part of the trail stretches in measurement.

Thought 3: mask-image

Now right here is the factor I found with the CSS mask-image property in CSS: You possibly can mix masks layers! Give it some thought like a background-image in CSS. You possibly can apply a number of gradients or photographs on a single ingredient. Now, what for those who mix all these layers to generate the ultimate masks you want?

That is precisely what we’re going to do right here with two layers:

A big rectangle that cowl the entire block aside from a stripe on the backside (proven in inexperienced)A picture of the arrow (proven in pink)

With that resolution, the rectangle can stretch in line with our tooltip’s dimensions, and the arrow will all the time preserve its fastened measurement.

All of the code and demos beneath are prefix free and the demos are utilizing Autoprefixer. On the time I’m writing this text, Edge, Chrome & Safari require prefixes.

Simply as we might with background properties, we’re going to use three totally different masks properties to outline our two layers:

mask-image: This property lets us draw the rectangle with a linear background and the arrow with an inline SVG.mask-position: The rectangle doesn’t want a place (because it begins from the top-left), however the arrow must be positioned on the center-bottom.mask-repeat: We have to keep away from repeating each layers; in any other case, the linear gradient would cowl the entire ingredient when it repeats.

.tooltip {
mask-image:
linear-gradient(#fff, #fff), /* Rectangle */
url(‘knowledge:picture/svg+xml;utf8,’); /* Backside arrow mask-position: */
0 0, /* Rectangle */
50% 100%; /* Backside arrow */
mask-size:
100% calc(100% – 18px), /* Rectangle */
38px 18px; /* Backside arrow */
mask-repeat: no-repeat;
}

CodePen Embed Fallback

Tada! Change the tooltip dimensions or exchange the picture and the underside arrow will preserve its authentic ratio.

Extra complicated shapes

Let’s get a bit of fancy and go deeper with this system. I used to be impressed by the iMessage app on iOS and tried to breed the identical tooltips with this masking method.

I had to attract extra layers for my masks to render each rounded nook:

4 circles, one for every nook (proven in pink)one horizontal rectangle (proven in blue)one vertical rectangle (proven in inexperienced)one SVG for the arrow (proven in yellow)

The total code goes to be a bit longer as now we have extra layers to attract, however the logic stays the identical. The corners are drawn utilizing 4 radial gradients. To fill the rectangle, we want two rectangles (one vertical, one horizontal) as proven above. And at last, our little arrow that’s utilizing an inline SVG.

.tooltip {
–radius: 25px;
mask-image:
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* High left nook */
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* High proper nook */
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* Backside left nook */
radial-gradient(#fff (var(–radius) – 1), #fff0 var(–radius)), /* Backside proper nook */
linear-gradient(#fff, #fff), /* Horizontal gradient */
linear-gradient(#fff, #fff), /* Vertical gradient */
url(‘knowledge:picture/svg+xml;utf8,’); /* Backside proper icon */
mask-position:
0 0, /* High left nook */
100% 0, /* High proper nook */
0 100%, /* Backside left nook */
100% 100%, /* Backside proper nook */
0 var(–radius), /* Horizontal gradient */
var(–radius) 0, /* Vertical gradient */
100% 100%; /* Backside proper icon */
mask-size:
(var(–radius) * 2) (var(–radius) * 2), /* High left nook */
(var(–radius) * 2) (var(–radius) * 2), /* High proper nook */
(var(–radius) * 2) (var(–radius) * 2), /* Backside left nook */
(var(–radius) * 2) (var(–radius) * 2), /* Backside proper nook */
100% calc(100% – #{var(–radius) * 2}), /* Horizontal gradient */
calc(100% – #{var(–radius) * 2}) 100%, /* Vertical gradient */
(39px / 2) (25px / 2); /* Backside proper icon */
mask-repeat: no-repeat;
}

CodePen Embed Fallback

As you see, we are able to create a model with the arrow on the left or proper by utilizing a flipped model of the arrow and positioning it in a special nook. The trick is working high-quality on tooltips with out photographs too. However like I mentioned originally of this text, you most likely don’t want that a lot CSS for those who solely have a plain background to fashion.

If you wish to be taught extra about clipping and masking in CSS, there are many different nice articles proper right here on CSS-Tips price testing.

Article

on

Nov 6, 2016


Clipping and Masking in CSS

Article

on

Jun 7, 2017


Masking vs. Clipping: When to Use Every

Article

on

Mar 2, 2019


Masks Compositing: The Crash Course

Article

on

Mar 6, 2018


CSS Methods and Results for Knockout Textual content

Video

on

Could 13, 2020


#185: Taking part in with CSS Masks

▶ Operating Time: 23:32

on

Oct 27, 2015


33: Clipping and Masking

The publish Excellent Tooltips With CSS Clipping and Masking appeared first on CSS-Tips.

You possibly can assist CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment