Skip to content

Commit e1f4e2e

Browse files
aayush105aayush105
authored
Merge pull request #803 from ThesllaDev/feature/popover-component
Add popover component
2 parents 95433c5 + 393f5bf commit e1f4e2e

File tree

4 files changed

+85
-0
lines changed

4 files changed

+85
-0
lines changed

‎Popover/index.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="styles.css">
8+
<title>Popover component without JavaScript</title>
9+
</head>
10+
11+
<body>
12+
<example>
13+
<button popovertarget="container-popover" class="btn-open-popover" id="btn-menu">
14+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
15+
<!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
16+
<path
17+
d="M320 208C289.1 208 264 182.9 264 152C264 121.1 289.1 96 320 96C350.9 96 376 121.1 376 152C376 182.9 350.9 208 320 208zM320 432C350.9 432 376 457.1 376 488C376 518.9 350.9 544 320 544C289.1 544 264 518.9 264 488C264 457.1 289.1 432 320 432zM376 320C376 350.9 350.9 376 320 376C289.1 376 264 350.9 264 320C264 289.1 289.1 264 320 264C350.9 264 376 289.1 376 320z" />
18+
</svg>
19+
</button>
20+
21+
<div popover id="container-popover">
22+
<button>
23+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
24+
<!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
25+
<path
26+
d="M288 64C252.7 64 224 92.7 224 128L224 384C224 419.3 252.7 448 288 448L480 448C515.3 448 544 419.3 544 384L544 183.4C544 166 536.9 149.3 524.3 137.2L466.6 81.8C454.7 70.4 438.8 64 422.3 64L288 64zM160 192C124.7 192 96 220.7 96 256L96 512C96 547.3 124.7 576 160 576L352 576C387.3 576 416 547.3 416 512L416 496L352 496L352 512L160 512L160 256L176 256L176 192L160 192z" />
27+
</svg>
28+
Copy
29+
</button>
30+
<button>
31+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
32+
<!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
33+
<path
34+
d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z" />
35+
</svg>
36+
Delete
37+
</button>
38+
<button>
39+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
40+
<!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
41+
<path
42+
d="M416.9 85.2L372 130.1L509.9 268L554.8 223.1C568.4 209.6 576 191.2 576 172C576 152.8 568.4 134.4 554.8 120.9L519.1 85.2C505.6 71.6 487.2 64 468 64C448.8 64 430.4 71.6 416.9 85.2zM338.1 164L122.9 379.1C112.2 389.8 104.4 403.2 100.3 417.8L64.9 545.6C62.6 553.9 64.9 562.9 71.1 569C77.3 575.1 86.2 577.5 94.5 575.2L222.3 539.7C236.9 535.6 250.2 527.9 261 517.1L476 301.9L338.1 164z" />
43+
</svg>
44+
Edit
45+
</button>
46+
</div>
47+
</example>
48+
</body>
49+
50+
</html>

‎Popover/styles.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
body {
2+
align-items: center;
3+
display: flex;
4+
justify-content: center;
5+
height: 100vh;
6+
}
7+
8+
.btn-open-popover {
9+
anchor-name: --btn-anchor;
10+
cursor: pointer;
11+
height: 50px;
12+
width: 50px;
13+
}
14+
15+
#container-popover {
16+
inset: unset;
17+
position-anchor: --btn-anchor;
18+
top: anchor(bottom);
19+
left: anchor(center);
20+
translate: -50% 0;
21+
22+
button {
23+
align-items: center;
24+
display: flex;
25+
font-weight: bold;
26+
gap: 5px;
27+
padding: 10px;
28+
width: 100%;
29+
30+
svg {
31+
width: 30px;
32+
}
33+
}
34+
}

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
339339
[<img src="images/tooltips2.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/XXOpga)
340340
[<img src="images/info-on-hover.png" height="230" title="Demo 3">](http://codepen.io/SitePoint/pen/akAmPw)
341341
[<img src="images/tooltips.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ)
342+
[<img src="images/Popover.gif" height="230" title="Demo 4">](https://codepen.io/theslladev/pen/oNKPwro)
342343

343344
**[⬆ back to top](#quick-links)**
344345

‎images/Popover.gif‎

249 KB
Loading

0 commit comments

Comments
 (0)