Popover d’alerte – auto et manual
HTML
index.html <div>
<button popovertarget="success" popovertargetaction="toggle">Toggle auto</button>
<div id="success" popover="auto" role="alert">Success !</div>
</div>
<div>
<button popovertarget="error" popovertargetaction="toggle">Toggle manual</button>
<div id="error" popover="manual" role="alert">Error !</div>
</div>
<div>
<button popovertarget="warning" popovertargetaction="show">Show auto</button>
<div id="warning" popover="auto" role="alert">Warning !</div>
</div>
<div>
<button popovertarget="info" popovertargetaction="show">Show manual</button>
<button popovertarget="info" popovertargetaction="hide">Hide manual</button>
<div id="info" popover="manual" role="alert">Info !</div>
</div>
CSS
style.css @layer demo {
[popover] {
position: fixed;
inset-inline: auto 2vw;
top: 2vw;
padding: 1rem;
color: white;
background-image: linear-gradient(
45deg,
black,
color-mix(in oklch, var(--border-color), black)
);
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
border: 1px solid var(--border-color);
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body > div {
display: flex;
gap: 2rem;
}
button {
background: white;
padding: 1rem;
color: var(--border-color);
border-radius: 100vmax;
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
border: 3px solid var(--border-color);
&[popovertarget="info"] {
--border-color: blue;
}
&[popovertarget="error"] {
--border-color: red;
}
&[popovertarget="warning"] {
--border-color: orange;
}
&[popovertarget="success"] {
--border-color: green;
}
}
[id="info"] {
--border-color: blue;
}
[id="success"] {
--border-color: green;
}
[id="error"] {
--border-color: red;
}
[id="warning"] {
--border-color: orange;
}
}