Over-Easy Anchor + Popover Mini Web Machine

Key Takeaways

presenting the over easy machine an overlay machine combining CSS anchor positioning and optionally but let's also just be honest highly likely HTML popover feature no longer does the positioned element need to be a child of the thing it wants to attach to and even better javascripts not required for rad Dynamic positioning showing and hiding of the popover and focus management woo let's dig [Music] in you're watching Mini web machines where we dive into small groups of code that drive rad user experiences let's kick this party off with an overview of anchor this API seriously rocks so hard it's easy to get started with but it's packed with features like autof flipping like on top and bottom depending on if it's in the viewport Auto visibility like is the item it's trying to Anchor to even visible right now or not and handy dandy positioning keywords so as shown here the anchor feature is Chrome first making this the first manyi web machines that's not Baseline ready but don't worry though we'll blink an eye and anchor is going to be cross browser so for now if you need to tuck this episode into your utility belt for later use it's time to get a basic example working it takes two to tango with the positioning aspects of the OV easy machine you need an anchor and a positioned element for the anchor it's a oneliner just give the element an anchor name for the positioned element this is where all the magic happens it's also where all the JavaScript worked used to be the element needs to be position fixed or absolute so let's add that next we need to add position anchor to set the anchor element we want to position against you know by default and the first fun part using keywords to specify where the positioned element should be placed and huzzah over and easy no position relative no Cal no noise just responsive adaptive positioning yeah at this point you might be like how many keywords are there well unas got us covered with this great tool anchor tool I like opening it up clicking the position I want choosing logical properties of course and then snagging that code right off that page and pasting it into my position area value and so anchor positioning already so satisfying but let's do some more with this machine here's a mouse Centric popover interaction we're hovering over a user in this system shows a small card of their details the inline links in the paragraph will be the anchors and each of the cards will be positioned elements let's build this up from scratch here's our HTML with unposed elements ready to become positioned popovers with the OV easy machine we're going to start by giving each inline link a unique anchor name second we'll give each of the user cards a position anchor that points to the contextually relevant anchor and next add some CSS to the author meta we're going to add position fixed and position area block start and ah pause here to just admire how easy that was to attach an overlay to an inline element what a breath of fresh air at least in my opinion now it's time to add some popover functionality all right so we'll head to our author meta Dives and we're going to add the attribute popover so it's basically like a oneliner to turn these into a popover but poof where' they go they disappeared well it turns out popovers are like a dialogue they're display none by default they follow a lot of the functionality of a dialog 2 so you're going to find a lot of crossover with the pop and lock machine it's in the top layer I mean pop overs are it can Aid in Focus management and it's already position fixed so we can remove that style but for this demo we're not using the arguably Superior declarative strategy for popovers for showing and hiding them we're going to trigger them on Hover don't worry the next example won't have any JavaScript and will be accessible to Alternative input modes all right it's time for some js we want to show popovers when those inline links are hovered on so we're going to select those links by grabbing all the elements that have the data hover popover attribute we're going to stat the popover for each anchor link in that closure and we're going to set up a mouse enter listener for each link and then show the popover and so check this out popovers already have light dismiss which is kind of a big difference from a dialogue and so we're not going to hook that up to set it up and voila we've used the OV easy machine with popovers to create a very applike experience with just a few lines of CSS and some JavaScript but guess what we can do better let's spice up the functionality with some more anchor position features first up let's remove some cruft position fixed we don't need it it's already the value for a popover next and this is a gotcha that I really want to stress a popover has an inset value by default it's set to zero we must overwrite this if we want our anchor flip feature to work which is what we're going to do next so to remedy this gotcha give anchored popovers the style of inset Auto and just think me later for that hot tip you know or you can pull your hair out when you're wondering why your anchor position features aren't behaving on a popo like you expect you know it's on you okay on to the fun part let's teach the anchor element to flip to the top or bottom of its anchor depending on which will keep it in the viewport this is done with position try fallbacks and we're going to set this value to flip Block in our case we're using block start as the position area so this line of CSS says try and be on block end if the position of block start means I'd be off screen so at first nothing looks like it's changed but what if we had a style to the body tag so that we can scroll this demo then we're going to see and here it is the overlaying element is now intelligently Swit switching from the top or bottom as needed to stay in view with one line of CSS I love it when one line of CSS has so much power okay but there's also there's more there's so much more there's another anchor feature that's just as slick and it's called position Tri order and we're going to pass it the value of most height so not only will the author card flip from top to bottom based on the viewport it now flips based on which quadrant of its containing block has more height this is really cool so sweet okay but for a final touch pop a margin block on the author meta class to add space above and below the overlaying author card and now wasn't this over easy it was it's popping over and it was really easy am I right I don't know I thought it was a good name okay so we got one more example of over easy and pop over combine to show you and this one uses no JavaScript it's accessible to a keyboard you get to learn another in position feature and let's add some show hide transitions to the popover like last time here's my anchor and here's the element I want to position to the Anchor start by giving the positioned element which I've called floaty here the popover attribute and it disappears but you know we wanted that it's now display none and position fixed popovers have a rad declarative API we haven't seen yet for showing and hiding them the popover just needs an ID we can teach our anchor button to show the popover with one line of HTML popover Target equals demo the ID of our popover the default action of this is to show a Target popover and so it's way up here in the corner but that's okay we'll anchor it in a second and while po popovers have light dismiss by default offering a close button can be nice two HTML attributes to do this describe which pop over to Target and then give it in action close all right we'll give it a test and it works rad so now let's anchor this floaty make the icon button an anchor by giving it an anchor name then tell the floaty to default its anchor positions to the Anchor icon never forget popovers need inset Auto if you want to Anchor them now we can give it position area block start and again this is all good okay let's teach it to flip yep that looks great let's teach it about Heights so it's more Dynamic looks good but here's a new one position visibility this will hide the popover if the thing it's anchored goes offc screen and bring it back when it comes back into view hot diggity dang right okay so now it's time to animate this floaty I'll save us some time by pasting in the necessary code but if this looks super forward to you watch the last episode of Mini web machines on the pop and lock dialogue I cover what all these magical incantations mean and do the important bit that's different for popovers is the hook for when it's open notice the use of popover open and also notice I threw in a spring easing from open props just so it looks extra floaty over top that anchor when it animates in and that's it we've got great keyboard support where Focus order is appropriate before and after closing we've added a backdrop and an animation we can still light dismiss we can still use the Escape key ah life is good our OV easy popover machine is hooked up and ready to rock I hope you enjoyed this mini weap machine check the show notes for links to the code and overall y'all get excited for anchor and popover apis they're amazing and one final note the mouse hover example will eventually not need JavaScript either keep your eyes out for the interest Target attribute which is like popover action in that it can show hide popovers declaratively but the interest part of the attribute describes a mouse or keyboard Focus are showing interest in the element so toggle the visibility of a Target popover and watch out for popover equals hint which will hide any other open popovers this combo is meant for Tool tips or other popover UI you want to show declaratively when a mous keyboard is showing interest in an element which is exactly what we did but we had to add some JavaScript and when we added that JavaScript we kind of lost some of that great Focus management so be on the lookout for these rad new attributes amazing stuff thanks for watching like And subscribe and watch out for the next Mini web machine d [Music]