Speaker explains the differences between the popover Target and the hide Target actions. They are going to send Jabez with some traveling music. Speaker will see Jabez 50 minutes after the hour and will get back to work.

They are happy to be back at the Tri-tip. Speaker wants to talk about something that they saw during the last week. They share their screen with Corey Lavista, who created a set of web component elements. Speaker explains the difference between shoelace dot Style and the new not on GitHub. Corey asked Speaker how the popover API is going. Speaker responded with a salute.

Speaker explains how the dialogue element in Brackets works. They explain to them how a popover works. Speaker explains how to close popovers and how to create interactive elements like action menus. An Origin trial for production environment is available in Chrome Canary.

Speaker is going to copy and paste the proposal from the open UI group. They explain how the popover attribute works. Speaker is going to give it a try. Popovers are given a default fixed position in the center of the viewport and have some padding and a border. They are promoted to the top layer above document and outside. Speaker explains to Aria how popovers work. They explain how the popover trigger works. Speaker explains how a popover trigger works. They explain how to show and dismiss popovers and listen for them for events. Speaker explains to Speaker how to style the backdrop of the dialogue. They explain how to create a popover.

Speaker is working on a project.

• popover api
• dialogue element
• html element
• ancestral popovers
• action menus
• top layer
• escape key
• html tag
• auto focus
• explicit trigger elements
• pseudo element
• popover target

Welcome, welcome back, same old place.

The tri-tip all changed since you hung up, but those dreams have remade, and they turn around.

It's going on, y'all.

Welcome back stretch.

Okay.

All right.

Get productive, not as much.

Doing some getting things done.

Yeah.

I mean, so little by little that's all we can do.

So I want to kind of quickly talk about this thing that I saw this during the last week, I was like, oh, it's cool.

Hopefully it's coming to fruition at some point.

So I wanted to talk about me, share my screen.

So of course, it started on Twitter and I kind of want to just show it real quick, just if folks don't know about an about it, okay?

So shells to Corey Lavista, you know, he's like the creator of the shoe late.

If you go shoelace knot style, he created a set of web component elements, super dope stuff.

You know, let us take a look at that.

I will show you, I don't know if this is actually there.

Are let me see.

So, the thing we're going to look up.

Hot /.

Yes, it's okay.

He doesn't have it because all these different kind of UI element.

Like this was pretty cool to image computer.

And so, you're able to compare two different images, super dope.

And then if you want to just like, add it to your code, a little bit of JavaScript and you have the compare here, you have the before, and after these put in there, it's pretty dope.

All right, let us see.

So yeah.

So really cool.

I have used like the QR code generator before and there's like the split panel, it is also pretty cool.

Call the image one but it doesn't sound like the same image or anything.

It's just two different elements, you can go back and forth.

All right, so that's all that, right?

So, let me going to put this link that it's next to the video.

Then also, shoelace dot Style.

If you'd like to check it out while you're watching the recording of the video.

Alright, so Says how it started.

And so, this is like a thread on GitHub talking about a new not, and yeah, I would they the probably like describe it better.

But so, this is the thing here, they're talking about, like, they're trying to look for the name of something, like, keeping this issue, open for anyone else, who wishes to put forward, an alternative component name, right?

And then Corey says, Going pop over out there for consideration and this is back in January 2021.

So like a couple years ago, Then.

Come to like well, you got updated this year.

January 2023.

So like two years later is now called the popover API and so Corey said, you know how's it going?

And it did not claim responsibility for the name change but it's funny how things turned out.

And then pretty sure.

Oh yeah.

And then I responded with like a salute, so shot him.

All right, so now you may be saying, like, well, what's the popover API?

And so it's this thing here.

So this is the link that was in between eat my ad Bo.

All right.

So then the popover API provides a standard mechanism for displaying popover.

It's on the web.

Now, you may be thinking, well, wait popovers, I thought you could do a dialogue.

And so, a dialogue is another element that you can use.

Now, this mentions notice, it says, element a dialogue element and I will explain the difference real quick.

But the dialogue is like a modal, right?

So there's an example here.

So, like, here it is, here's the modal.

There's no backdrop, do right?

And here's another example.

If I show the dialogue now you notice so, I can't interact with this button anymore so it kind of took over the whole, all right?

Whereas with the popover now, it doesn't do that.

So let us talk about.

And then also you saw how the element is dialogue, like in Brackets.

That is the HTML element.

This is kind of like a thing that you Can put on any element.

So like, for example, Like, if there was a button and you didn't want people to be able to click the button, you put disabled on it, right?

So it's kind of like that.

So if you want to turn something into a popover, you would just put popover.

Well, I am thinking so far.

So let us just read on cuz I just kind of skim this quickly so the popover API provides Developer consistent, flexible mechanism, for displaying popover content on top of other page, content and form.

I understand a popover is kind of like a little toast ball like a little notification, so it doesn't take over like the whole site like a dialogue.

Does, you know, like little thing that pops up and it pops over your content and soap operas can be like dismissed with a close signal.

So like if you click anywhere outside of it, You should be able to close it.

So, okay, here we go.

Close signals include closing by clicking out of the pop over or pressing escape and opening other non ancestral popovers.

So you can open up another pop over, and we will get rid of the previous one.

Typical use cases include user interactive elements like action menus.

So if you have like a three dot joints, you click that and it shows like more.

I am assuming like that form element suggestions.

Content Pickers teaching you I got one less.

Oh, like if you like hey this button, does this thing like one of those like little tooltip things, I guess and the listbox portion of a select control.

So, if you want to have, like, click the select, instead of having like the regular drop-down, you can have like your own creative thing.

All right?

So let us see.

It's gonna pop over is planned for launch in Chrome.

114 available in stable, in early, May 20-22, and we're in April, so, like next month, okay.

All right.

It is enabled by default in Chrome Canary.

So, if you have that, you can register for An Origin trial for production environment.

And yes, there's that.

All right, Concepts, and usage popovers are used constantly all over the web developers.

Keep having to read.

Implement popover styling positioning and z-index stacking Focus management keyboard interactions and accessibility semantics for each new project, as well as duplication of work.

This has resulted in an inconsistent end user experience across different apps.

So if you have the kind keep remaking it, you have to do it on your own.

Yeah, it's gonna be kind of inconsistent, right?

So then these folks open UI group publish a proposal which is this one here?

And, so I am going to copy and paste this as well.

And this kind of goes through, like all the things that go into the popover.

So, such as like, keyboard, like commands, and so, they can kind of control it.

And they're like the JavaScript trigger and all that stuff and animations of popovers.

So, it's a, it's in depth.

All right, let us just say that it's a lot of stuff there.

Cool.

So back to here may take a look at it later, but here we go.

There any tailgate.

So now any HTML can be turned into a popover using the popover attribute, just like you're saying before.

So that's how it's different from like the dialogue.

Also, because dialogue is actually an element dialogue.

Whereas, with the popover API, you can basically turn anything into a popover.

Give an example.

Hopefully you have an example somewhere.

Examples.

So you can see here, just P tag turns into a popover.

Just by adding the attribute.

Popover, cool.

That's pretty dope.

All right, let us see.

Go back up to your website.

Here.

Alright, so now, Okay, cool.

So yeah, so the popover API provides, the following default Behavior popovers are hidden by default, so using display:none.

So if you put that like on that P tag previously, it will automatically have this play.

None.

I have the well it's not really out yet, so I will give it a shot see how that works out.

Pop over popovers are given a default fixed position in the center of the viewport honest.

Pretty cool padding and a border.

Okay, so it comes with its own.

Like it will Center it for you and you will have some padding and a border by default.

Interesting when shown popovers are promoted to the top layer above document and outside.

Oh, so it's I guess if you put it like position:absolute so it kind of like puts it at the top.

I think that's at least what I am getting from that.

Popovers have light dismiss like they're saving for by that.

We mean you can close the popover with a close signal such as clicking outside the popover.

Or navigate keyboard navigating to another element or pressing the Escape key.

So let us write for example you have it like as a select thing and it pops up and if you were to Tab out of the select I guess it will go away automatically because it's no longer like in Focus.

You're not using.

All right, that's cool.

We can press the Escape key to now, problems are just seeing this is good by having like a consistent standard.

You can make them accessible like across the board.

So popovers are designed to be accessible with an element defined as a popover trigger automatically.

Getting Aria has pop-up semantics.

So once you put that there on your HTML tag, you will get all that popover trigger automatically area has pop-up goodness.

In addition, focus into the popover can be controlled using auto focus.

And when the popover is lightly, dismissed or heuristic determines, where focus should go next.

Oh, so it will decide like, if you were to hit Escape or whatever where the focus.

So if you like a button below it or something, then maybe you will go to that button or something.

Okay, for example, over, they have an example.

Focus could go back to the previously, Focus element or element kicked out.

Side of the popover.

So if like the example here, For the dialogue.

Like if I was like, this is like a popover and I click this show, the dialog, then it would probably Focus to that it would dismiss this and focus to that.

All right, cool, you see Focus management that goes back to the same open UI thing.

Alright.

So key term a popover trigger is an element that causes a change in the state of the popover it is associated.

With, for example, a button that shows and dismisses the popover which makes sense.

Kind of like how with this dialogue Yeah.

All right.

Okay, so then you can do also there so the popover attribute can take one of the following values so you can set it.

So I can pop over against equal Auto or manual.

I guess Otto might be the default because that's what the same before.

And then you can have manual popovers cannot be lightly like this, Miss. They can only be dismissed by an explicit trigger elements or by JavaScript.

Okay.

They don't automatically dismiss previously shown popovers.

Okay, so almost I guess operates kind of like a dialogue at that point, I guess.

All right, ku-ku-ku-ku you can show in dismiss popovers into different ways so that about sums up here.

Cool.

Oh, that's cool.

So you can do like programmatically a JavaScript like, show popover, High popover makes sense.

Oh, and then you can listen for them for events.

That's cool.

All right.

Now this so dialogue also has this.

I think the backdrop let me check for this draw.

I was a pseudo element, so I guess if you just use it, what way home, Okay.

Yeah, so the backdrops you can be used to style the backdrop of the dialogue.

All right, cool.

So I guess that's similar here.

Yep.

A backdrop through element install the document behind the popover when it is shown, you might want to blur or fade the page when showing popovers Okay, there is an open one.

I think that's also for An open area for dialogue.

Missing.

That's true.

Apparently not.

All right, cool.

Let us see, then is some HTML.

Attribute has already said pop over, and we target joint so you can do any of the CSS features.

So it's kind of like wrapping everything up Yeah.

This is pretty cool so extensions to HTML element and input so you can so specifically for a button or input elements, you have these things here, they got some examples again.

You just add the attribute pop over this makes it the popover They have buttons here.

So yeah so you link it.

The popover Target the same ID and you say what it does show and then, oh, I guess or you could just What are you?

Just put that.

Okay.

So, yeah.

So there's the popover Target action and here's the popover High Target.

And so, I guess you can have like both, you can provide the Target and the target action, but I bet there's a show one, right?

There's gotta be a show, like how there's a hide.

I am getting way too deep into this now, huh.

That's weird because there's this popover Target, hide Target, whatever the popover show.

Target again, I will probably play around with that once it's actually out Okay?

And it gives the styles of some CSS goodness, that's example of the backdrop, some JavaScript.

And then here're the events.

Yeah, that's pretty dope.

So looking forward to checking that out, that would be pretty cool.

Like if you like hovered over like an image maybe and it would show details about the image.

So you don't have to like really click anywhere or anything.

You just like either hover or maybe like pulling Focus like tab to it or something.

Obviously, all right, so yeah, that's all that.

So I am done learning about it.

That's pretty cool.

All right, so get your back to work again.

Thanks for hanging out, screen.

Share Cool.

All right, so I am gonna get you all back to work.

Going to send you all off with some traveling music.

This is new Jabez featuring a Pawnee be the track is called, thank you.

Because again thanks for hanging out.

See you 50 minutes after the hour till then I wish you much productivity.

I am going to get started with my laundry and working on some CSS animation.

Stuff on a project.

Alright, so again, thanks for hanging out.

See you soon.

Ninja beds.

Featuring a Pawnee.

Be, thank you.