@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/popover.md ADDED
@@ -0,0 +1,1938 @@
1
+ ---
2
+ component: fd-popover
3
+ title: Components/Popover
4
+ category: Components
5
+ selector: fd-popover
6
+ cssFile: popover.css
7
+ sourcePath: packages/styles/stories/Components/popover/popover.stories.js
8
+ tags: []
9
+ dependencies: ["avatar","bar","button","icon","layout-grid","menu","popover","segmented-button"]
10
+ relatedComponents: ["avatar","bar","button","icon","layout-grid","menu","popover","segmented-button"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.409Z
13
+ ---
14
+
15
+ # Components/Popover
16
+
17
+ The popover displays additional information for an object in a compact way without leaving the page. The component contains two essential elements: the control (trigger) and body (content). It can also be paired with a **Menu**, whereas the menu button would trigger a dropdown (body).
18
+
19
+ ##Usage
20
+ **Use a popover if:**
21
+
22
+ - You need to define your own structure.
23
+ - You want to show UI elements that are not available with the quick view.
24
+
25
+ **Do not use a popover if:**
26
+
27
+ - The objects are in a master list (in this case, the details are shown in the details area).
28
+
29
+
30
+ ##Guidelines
31
+ - As a general rule, it is suggested that one popover be revealed on the page at any given time. Opening one popover should close all others to prevent multiple layers and collisions of several popovers.
32
+ - Show status information as text fields in a content group. You can use semantic text colors.
33
+ - You can define a height for the popover. If the content exceeds the height, a scroll bar is displayed.
34
+
35
+ ## Usage Guidelines
36
+
37
+ **Use a popover if:**
38
+
39
+ - You need to define your own structure.
40
+ - You want to show UI elements that are not available with the quick view.
41
+
42
+ ## When Not To Use
43
+
44
+ - The objects are in a master list (in this case, the details are shown in the details area).
45
+
46
+ ## Dependencies
47
+
48
+ This component depends on the following CSS files:
49
+
50
+ - `avatar.css`
51
+ - `bar.css`
52
+ - `button.css`
53
+ - `icon.css`
54
+ - `layout-grid.css`
55
+ - `menu.css`
56
+ - `popover.css`
57
+ - `segmented-button.css`
58
+
59
+ ## Installation
60
+
61
+ ```bash
62
+ npm install fundamental-styles
63
+ ```
64
+
65
+ ```html
66
+ <!-- Include theme -->
67
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
68
+
69
+ <!-- Include component CSS -->
70
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
71
+
72
+ <!-- Include dependencies -->
73
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
74
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
75
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
76
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
77
+ <link href="node_modules/fundamental-styles/dist/layout-grid.css" rel="stylesheet">
78
+ <link href="node_modules/fundamental-styles/dist/menu.css" rel="stylesheet">
79
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
80
+ <link href="node_modules/fundamental-styles/dist/segmented-button.css" rel="stylesheet">
81
+ ```
82
+
83
+ ## Basic Usage
84
+
85
+ ```html
86
+ <div class="fd-popover">
87
+ <div class="fd-popover__control">
88
+ <button
89
+ aria-controls="popoverHSF1"
90
+ aria-expanded="true"
91
+ aria-haspopup="true"
92
+ class="fd-button"
93
+ onclick="onPopoverClick('popoverHSF1');"
94
+ role="button">
95
+ <!- role is needed to override the combobox role due to aria-haspopup -->
96
+ Header
97
+ </button>
98
+ </div>
99
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF1">
100
+ <div class="fd-popover__body-header">
101
+ <div class="fd-bar fd-bar--header">
102
+ <div class="fd-bar__left">
103
+ <div class="fd-bar__element">
104
+ <button aria-label="previous options" class="fd-button fd-button--transparent">
105
+ <i class="sap-icon--navigation-left-arrow"></i>
106
+ </button>
107
+ </div>
108
+ <div class="fd-bar__element">
109
+ Header
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ <nav class="fd-menu" aria-label="options with header">
115
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
116
+ <li class="fd-menu__item">
117
+ <a class="fd-menu__link" href="#">
118
+ <span class="fd-menu__title">Option 1</span>
119
+ </a>
120
+ </li>
121
+ <li class="fd-menu__item">
122
+ <a class="fd-menu__link" href="#">
123
+ <span class="fd-menu__title">Option 2</span>
124
+ </a>
125
+ </li>
126
+ <li class="fd-menu__item">
127
+ <a class="fd-menu__link" href="#">
128
+ <span class="fd-menu__title">Option 3</span>
129
+ </a>
130
+ </li>
131
+ </ul>
132
+ </nav>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="fd-popover">
137
+ <div class="fd-popover__control">
138
+ <button
139
+ aria-controls="popoverHSF2"
140
+ aria-expanded="true"
141
+ aria-haspopup="dialog"
142
+ class="fd-button"
143
+ onclick="onPopoverClick('popoverHSF2');"
144
+ role="button">
145
+ <!- role is needed to override the combobox role due to aria-haspopup -->
146
+ Footer
147
+ </button>
148
+ </div>
149
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF2">
150
+ <nav class="fd-menu" aria-label="options with footer">
151
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
152
+ <li class="fd-menu__item">
153
+ <a class="fd-menu__link" href="#">
154
+ <span class="fd-menu__title">Option 1</span>
155
+ </a>
156
+ </li>
157
+ <li class="fd-menu__item">
158
+ <a class="fd-menu__link" href="#">
159
+ <span class="fd-menu__title">Option 2</span>
160
+ </a>
161
+ </li>
162
+ <li class="fd-menu__item">
163
+ <a class="fd-menu__link" href="#">
164
+ <span class="fd-menu__title">Option 3</span>
165
+ </a>
166
+ </li>
167
+ </ul>
168
+ </nav>
169
+ <div class="fd-popover__body-footer">
170
+ <div class="fd-bar is-compact fd-bar--footer">
171
+ <div class="fd-bar__right">
172
+ <div class="fd-bar__element">
173
+ <button class="fd-button fd-button--emphasized">Save</button>
174
+ </div>
175
+ <div class="fd-bar__element">
176
+ <button class="fd-button fd-button--transparent">Cancel</button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="fd-popover">
185
+ <div class="fd-popover__control">
186
+ <button
187
+ aria-controls="popoverHSF3"
188
+ aria-expanded="true"
189
+ aria-haspopup="dialog"
190
+ class="fd-button"
191
+ onclick="onPopoverClick('popoverHSF3');"
192
+ role="button">
193
+ Header, subheader and footer
194
+ </button>
195
+ </div>
196
+ <section
197
+ aria-hidden="false"
198
+ class="fd-popover__body"
199
+ id="popoverHSF3"
200
+ aria-label="Dialog Data 1"
201
+ role="dialog">
202
+ <header class="fd-popover__body-header">
203
+ <div class="fd-bar fd-bar--header-with-subheader">
204
+ <div class="fd-bar__left">
205
+ <div class="fd-bar__element">
206
+ <button
207
+ aria-label="back button"
208
+ class="fd-button fd-button--transparent">
209
+ <i class="sap-icon--navigation-left-arrow"></i>
210
+ </button>
211
+ </div>
212
+ <div id="popoverHeader" class="fd-bar__element">
213
+ Header
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <div class="fd-bar is-compact fd-bar--subheader">
218
+ <div class="fd-bar__middle">
219
+ <div class="fd-bar__element">
220
+ <div class="fd-form-item">
221
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
222
+ <button aria-label="email" class="fd-button fd-button--toggled" aria-pressed="true">
223
+ <i class="sap-icon--email"></i>
224
+ </button>
225
+ <button aria-label="phone" class="fd-button" aria-pressed="false">
226
+ <i class="sap-icon--iphone"></i>
227
+ </button>
228
+ <button aria-label="notification" class="fd-button" aria-pressed="false">
229
+ <i class="sap-icon--notification-2"></i>
230
+ </button>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </header>
237
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
238
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
239
+ <li class="fd-menu__item">
240
+ <a class="fd-menu__link" href="#">
241
+ <span class="fd-menu__title">Option 1</span>
242
+ </a>
243
+ </li>
244
+ <li class="fd-menu__item">
245
+ <a class="fd-menu__link" href="#">
246
+ <span class="fd-menu__title">Option 2</span>
247
+ </a>
248
+ </li>
249
+ <li class="fd-menu__item">
250
+ <a class="fd-menu__link" href="#">
251
+ <span class="fd-menu__title">Option 3</span>
252
+ </a>
253
+ </li>
254
+ </ul>
255
+ </nav>
256
+ <footer class="fd-popover__body-footer">
257
+ <div class="fd-bar is-compact fd-bar--footer">
258
+ <div class="fd-bar__right">
259
+ <div class="fd-bar__element">
260
+ <button class="fd-button fd-button--emphasized">Save</button>
261
+ </div>
262
+ <div class="fd-bar__element">
263
+ <button class="fd-button fd-button--transparent">Cancel</button>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </footer>
268
+ </section>
269
+ </div>
270
+
271
+ <div class="fd-popover">
272
+ <div class="fd-popover__control">
273
+ <button
274
+ aria-controls="popoverHSF3wee"
275
+ aria-expanded="true"
276
+ aria-haspopup="dialog"
277
+ class="fd-button"
278
+ onclick="onPopoverClick('popoverHSF3wee');"
279
+ role="button">
280
+ Long text (title)
281
+ </button>
282
+ </div>
283
+ <section
284
+ aria-hidden="false"
285
+ class="fd-popover__body"
286
+ id="popoverHSF3wee"
287
+
288
+ aria-label="Dialog Data 1"
289
+ role="dialog">
290
+ <header class="fd-popover__body-header">
291
+ <div class="fd-bar fd-bar--header-with-subheader">
292
+ <div class="fd-bar__left">
293
+ <div id="popoverHeaderHSF3wee" class="fd-bar__element">
294
+ <h5 class="fd-title fd-title--h5 fd-title--wrap" aria-label="text">Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.</h5>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ <div class="fd-bar is-compact fd-bar--subheader">
299
+ <div class="fd-bar__middle">
300
+ <div class="fd-bar__element">
301
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </header>
306
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
307
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
308
+ <li class="fd-menu__item">
309
+ <a class="fd-menu__link" href="#">
310
+ <span class="fd-menu__title">Option 1</span>
311
+ </a>
312
+ </li>
313
+ <li class="fd-menu__item">
314
+ <a class="fd-menu__link" href="#">
315
+ <span class="fd-menu__title">Option 2</span>
316
+ </a>
317
+ </li>
318
+ <li class="fd-menu__item">
319
+ <a class="fd-menu__link" href="#">
320
+ <span class="fd-menu__title">Option 3</span>
321
+ </a>
322
+ </li>
323
+ </ul>
324
+ </nav>
325
+ <footer class="fd-popover__body-footer">
326
+ <div class="fd-bar is-compact fd-bar--footer">
327
+ <div class="fd-bar__right">
328
+ <div class="fd-bar__element">
329
+ <button class="fd-button fd-button--emphasized">Save</button>
330
+ </div>
331
+ <div class="fd-bar__element">
332
+ <button class="fd-button fd-button--transparent">Cancel</button>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </footer>
337
+ </section>
338
+ </div>
339
+
340
+ <div class="fd-popover">
341
+ <div class="fd-popover__control">
342
+ <button
343
+ aria-controls="popoverHSF3rq"
344
+ aria-expanded="true"
345
+ aria-haspopup="dialog"
346
+ class="fd-button"
347
+ onclick="onPopoverClick('popoverHSF3rq');"
348
+ role="button">
349
+ Long text
350
+ </button>
351
+ </div>
352
+ <section
353
+ aria-hidden="false"
354
+ class="fd-popover__body"
355
+ id="popoverHSF3rq"
356
+
357
+ aria-label="Dialog Data 1"
358
+ role="dialog">
359
+ <header class="fd-popover__body-header">
360
+ <div class="fd-bar fd-bar--header-with-subheader">
361
+ <div class="fd-bar__left">
362
+ <div class="fd-bar__element">
363
+ <button
364
+ aria-label="back button"
365
+ class="fd-button fd-button--transparent">
366
+ <i class="sap-icon--navigation-left-arrow"></i>
367
+ </button>
368
+ </div>
369
+ <div id="popoverHeaderHSF3rq" class="fd-bar__element">
370
+ <span>
371
+ Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
372
+ </span>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="fd-bar is-compact fd-bar--subheader">
377
+ <div class="fd-bar__middle">
378
+ <div class="fd-bar__element">
379
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </header>
384
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
385
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
386
+ <li class="fd-menu__item">
387
+ <a class="fd-menu__link" href="#">
388
+ <span class="fd-menu__title">Option 1</span>
389
+ </a>
390
+ </li>
391
+ <li class="fd-menu__item">
392
+ <a class="fd-menu__link" href="#">
393
+ <span class="fd-menu__title">Option 2</span>
394
+ </a>
395
+ </li>
396
+ <li class="fd-menu__item">
397
+ <a class="fd-menu__link" href="#">
398
+ <span class="fd-menu__title">Option 3</span>
399
+ </a>
400
+ </li>
401
+ </ul>
402
+ </nav>
403
+ <footer class="fd-popover__body-footer">
404
+ <div class="fd-bar is-compact fd-bar--footer">
405
+ <div class="fd-bar__right">
406
+ <div class="fd-bar__element">
407
+ <button class="fd-button fd-button--emphasized">Save</button>
408
+ </div>
409
+ <div class="fd-bar__element">
410
+ <button class="fd-button fd-button--transparent">Cancel</button>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </footer>
415
+ </section>
416
+ </div>
417
+ ```
418
+
419
+ ## Modifiers
420
+
421
+ | Class | Description |
422
+ |-------|-------------|
423
+ | `fd-popover--btp` | This extension of Popover is used by components and patterns in the BTP area |
424
+ | `fd-popover--right` | Style variant |
425
+
426
+ ## States
427
+
428
+ | Class | Description |
429
+ |-------|-------------|
430
+ | `is-compact` | Compact state |
431
+
432
+ ## BEM Elements
433
+
434
+ This component uses the following BEM elements:
435
+
436
+ - `fd-popover__body`
437
+ - `fd-popover__body--above`
438
+ - `fd-popover__body--after`
439
+ - `fd-popover__body--arrow-bottom`
440
+ - `fd-popover__body--arrow-left`
441
+ - `fd-popover__body--arrow-right`
442
+ - `fd-popover__body--arrow-x-center`
443
+ - `fd-popover__body--arrow-x-end`
444
+ - `fd-popover__body--arrow-y-bottom`
445
+ - `fd-popover__body--arrow-y-center`
446
+ - `fd-popover__body--before`
447
+ - `fd-popover__body--bottom`
448
+ - `fd-popover__body--center`
449
+ - `fd-popover__body--left`
450
+ - `fd-popover__body--middle`
451
+ - `fd-popover__body--no-arrow`
452
+ - `fd-popover__body--padding`
453
+ - `fd-popover__body--resizable`
454
+ - `fd-popover__body--right`
455
+ - `fd-popover__body-content`
456
+ - `fd-popover__body-footer`
457
+ - `fd-popover__body-footer--center`
458
+ - `fd-popover__body-header`
459
+ - `fd-popover__control`
460
+ - `fd-popover__resize-handle`
461
+ - `fd-popover__wrapper`
462
+
463
+ ## Related Components
464
+
465
+ This component works with or depends on:
466
+
467
+ - `avatar`
468
+ - `bar`
469
+ - `button`
470
+ - `icon`
471
+ - `layout-grid`
472
+ - `menu`
473
+ - `popover`
474
+ - `segmented-button`
475
+
476
+ ## Design Tokens
477
+
478
+ Key CSS variables used by this component:
479
+
480
+ - `--above`
481
+ - `--after`
482
+ - `--arrow`
483
+ - `--arrow-x-end`
484
+ - `--before`
485
+ - `--bottom`
486
+ - `--btp`
487
+ - `--center`
488
+ - `--display`
489
+ - `--dropdown`
490
+ - `--fdIcon_Button_Height`
491
+ - `--fdIcon_Button_Width`
492
+ - `--fdModal_BackgroundColor`
493
+ - `--fdPopover_Arrow_Size`
494
+ - `--fdPopover_Body_Border_Radius`
495
+
496
+ *...and 5 more*
497
+
498
+ ## Examples
499
+
500
+ ### Body variants
501
+
502
+ There are several variants of the popover body that can be displayed depending on the use case.
503
+
504
+ | Variant | Modifier class | Description
505
+ :------ | :------------- | :---------------
506
+ Header | \
507
+
508
+ ```html
509
+ <div class="fd-popover">
510
+ <div class="fd-popover__control">
511
+ <button
512
+ aria-controls="popoverHSF1"
513
+ aria-expanded="true"
514
+ aria-haspopup="true"
515
+ class="fd-button"
516
+ onclick="onPopoverClick('popoverHSF1');"
517
+ role="button">
518
+ <!- role is needed to override the combobox role due to aria-haspopup -->
519
+ Header
520
+ </button>
521
+ </div>
522
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF1">
523
+ <div class="fd-popover__body-header">
524
+ <div class="fd-bar fd-bar--header">
525
+ <div class="fd-bar__left">
526
+ <div class="fd-bar__element">
527
+ <button aria-label="previous options" class="fd-button fd-button--transparent">
528
+ <i class="sap-icon--navigation-left-arrow"></i>
529
+ </button>
530
+ </div>
531
+ <div class="fd-bar__element">
532
+ Header
533
+ </div>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ <nav class="fd-menu" aria-label="options with header">
538
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
539
+ <li class="fd-menu__item">
540
+ <a class="fd-menu__link" href="#">
541
+ <span class="fd-menu__title">Option 1</span>
542
+ </a>
543
+ </li>
544
+ <li class="fd-menu__item">
545
+ <a class="fd-menu__link" href="#">
546
+ <span class="fd-menu__title">Option 2</span>
547
+ </a>
548
+ </li>
549
+ <li class="fd-menu__item">
550
+ <a class="fd-menu__link" href="#">
551
+ <span class="fd-menu__title">Option 3</span>
552
+ </a>
553
+ </li>
554
+ </ul>
555
+ </nav>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="fd-popover">
560
+ <div class="fd-popover__control">
561
+ <button
562
+ aria-controls="popoverHSF2"
563
+ aria-expanded="true"
564
+ aria-haspopup="dialog"
565
+ class="fd-button"
566
+ onclick="onPopoverClick('popoverHSF2');"
567
+ role="button">
568
+ <!- role is needed to override the combobox role due to aria-haspopup -->
569
+ Footer
570
+ </button>
571
+ </div>
572
+ <div class="fd-popover__body" aria-hidden="false" id="popoverHSF2">
573
+ <nav class="fd-menu" aria-label="options with footer">
574
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
575
+ <li class="fd-menu__item">
576
+ <a class="fd-menu__link" href="#">
577
+ <span class="fd-menu__title">Option 1</span>
578
+ </a>
579
+ </li>
580
+ <li class="fd-menu__item">
581
+ <a class="fd-menu__link" href="#">
582
+ <span class="fd-menu__title">Option 2</span>
583
+ </a>
584
+ </li>
585
+ <li class="fd-menu__item">
586
+ <a class="fd-menu__link" href="#">
587
+ <span class="fd-menu__title">Option 3</span>
588
+ </a>
589
+ </li>
590
+ </ul>
591
+ </nav>
592
+ <div class="fd-popover__body-footer">
593
+ <div class="fd-bar is-compact fd-bar--footer">
594
+ <div class="fd-bar__right">
595
+ <div class="fd-bar__element">
596
+ <button class="fd-button fd-button--emphasized">Save</button>
597
+ </div>
598
+ <div class="fd-bar__element">
599
+ <button class="fd-button fd-button--transparent">Cancel</button>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <div class="fd-popover">
608
+ <div class="fd-popover__control">
609
+ <button
610
+ aria-controls="popoverHSF3"
611
+ aria-expanded="true"
612
+ aria-haspopup="dialog"
613
+ class="fd-button"
614
+ onclick="onPopoverClick('popoverHSF3');"
615
+ role="button">
616
+ Header, subheader and footer
617
+ </button>
618
+ </div>
619
+ <section
620
+ aria-hidden="false"
621
+ class="fd-popover__body"
622
+ id="popoverHSF3"
623
+ aria-label="Dialog Data 1"
624
+ role="dialog">
625
+ <header class="fd-popover__body-header">
626
+ <div class="fd-bar fd-bar--header-with-subheader">
627
+ <div class="fd-bar__left">
628
+ <div class="fd-bar__element">
629
+ <button
630
+ aria-label="back button"
631
+ class="fd-button fd-button--transparent">
632
+ <i class="sap-icon--navigation-left-arrow"></i>
633
+ </button>
634
+ </div>
635
+ <div id="popoverHeader" class="fd-bar__element">
636
+ Header
637
+ </div>
638
+ </div>
639
+ </div>
640
+ <div class="fd-bar is-compact fd-bar--subheader">
641
+ <div class="fd-bar__middle">
642
+ <div class="fd-bar__element">
643
+ <div class="fd-form-item">
644
+ <div class="fd-segmented-button" role="group" aria-label="Group label">
645
+ <button aria-label="email" class="fd-button fd-button--toggled" aria-pressed="true">
646
+ <i class="sap-icon--email"></i>
647
+ </button>
648
+ <button aria-label="phone" class="fd-button" aria-pressed="false">
649
+ <i class="sap-icon--iphone"></i>
650
+ </button>
651
+ <button aria-label="notification" class="fd-button" aria-pressed="false">
652
+ <i class="sap-icon--notification-2"></i>
653
+ </button>
654
+ </div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </header>
660
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
661
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
662
+ <li class="fd-menu__item">
663
+ <a class="fd-menu__link" href="#">
664
+ <span class="fd-menu__title">Option 1</span>
665
+ </a>
666
+ </li>
667
+ <li class="fd-menu__item">
668
+ <a class="fd-menu__link" href="#">
669
+ <span class="fd-menu__title">Option 2</span>
670
+ </a>
671
+ </li>
672
+ <li class="fd-menu__item">
673
+ <a class="fd-menu__link" href="#">
674
+ <span class="fd-menu__title">Option 3</span>
675
+ </a>
676
+ </li>
677
+ </ul>
678
+ </nav>
679
+ <footer class="fd-popover__body-footer">
680
+ <div class="fd-bar is-compact fd-bar--footer">
681
+ <div class="fd-bar__right">
682
+ <div class="fd-bar__element">
683
+ <button class="fd-button fd-button--emphasized">Save</button>
684
+ </div>
685
+ <div class="fd-bar__element">
686
+ <button class="fd-button fd-button--transparent">Cancel</button>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </footer>
691
+ </section>
692
+ </div>
693
+
694
+ <div class="fd-popover">
695
+ <div class="fd-popover__control">
696
+ <button
697
+ aria-controls="popoverHSF3wee"
698
+ aria-expanded="true"
699
+ aria-haspopup="dialog"
700
+ class="fd-button"
701
+ onclick="onPopoverClick('popoverHSF3wee');"
702
+ role="button">
703
+ Long text (title)
704
+ </button>
705
+ </div>
706
+ <section
707
+ aria-hidden="false"
708
+ class="fd-popover__body"
709
+ id="popoverHSF3wee"
710
+
711
+ aria-label="Dialog Data 1"
712
+ role="dialog">
713
+ <header class="fd-popover__body-header">
714
+ <div class="fd-bar fd-bar--header-with-subheader">
715
+ <div class="fd-bar__left">
716
+ <div id="popoverHeaderHSF3wee" class="fd-bar__element">
717
+ <h5 class="fd-title fd-title--h5 fd-title--wrap" aria-label="text">Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.</h5>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ <div class="fd-bar is-compact fd-bar--subheader">
722
+ <div class="fd-bar__middle">
723
+ <div class="fd-bar__element">
724
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi.
725
+ </div>
726
+ </div>
727
+ </div>
728
+ </header>
729
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
730
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
731
+ <li class="fd-menu__item">
732
+ <a class="fd-menu__link" href="#">
733
+ <span class="fd-menu__title">Option 1</span>
734
+ </a>
735
+ </li>
736
+ <li class="fd-menu__item">
737
+ <a class="fd-menu__link" href="#">
738
+ <span class="fd-menu__title">Option 2</span>
739
+ </a>
740
+ </li>
741
+ <li class="fd-menu__item">
742
+ <a class="fd-menu__link" href="#">
743
+ <span class="fd-menu__title">Option 3</span>
744
+ </a>
745
+ </li>
746
+ </ul>
747
+ </nav>
748
+ <footer class="fd-popover__body-footer">
749
+ <div class="fd-bar is-compact fd-bar--footer">
750
+ <div class="fd-bar__right">
751
+ <div class="fd-bar__element">
752
+ <button class="fd-button fd-button--emphasized">Save</button>
753
+ </div>
754
+ <div class="fd-bar__element">
755
+ <button class="fd-button fd-button--transparent">Cancel</button>
756
+ </div>
757
+ </div>
758
+ </div>
759
+ </footer>
760
+ </section>
761
+ </div>
762
+
763
+ <div class="fd-popover">
764
+ <div class="fd-popover__control">
765
+ <button
766
+ aria-controls="popoverHSF3rq"
767
+ aria-expanded="true"
768
+ aria-haspopup="dialog"
769
+ class="fd-button"
770
+ onclick="onPopoverClick('popoverHSF3rq');"
771
+ role="button">
772
+ Long text
773
+ </button>
774
+ </div>
775
+ <section
776
+ aria-hidden="false"
777
+ class="fd-popover__body"
778
+ id="popoverHSF3rq"
779
+
780
+ aria-label="Dialog Data 1"
781
+ role="dialog">
782
+ <header class="fd-popover__body-header">
783
+ <div class="fd-bar fd-bar--header-with-subheader">
784
+ <div class="fd-bar__left">
785
+ <div class="fd-bar__element">
786
+ <button
787
+ aria-label="back button"
788
+ class="fd-button fd-button--transparent">
789
+ <i class="sap-icon--navigation-left-arrow"></i>
790
+ </button>
791
+ </div>
792
+ <div id="popoverHeaderHSF3rq" class="fd-bar__element">
793
+ <span>
794
+ Header Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
795
+ </span>
796
+ </div>
797
+ </div>
798
+ </div>
799
+ <div class="fd-bar is-compact fd-bar--subheader">
800
+ <div class="fd-bar__middle">
801
+ <div class="fd-bar__element">
802
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint repellendus exercitationem debitis, ipsum quaerat quo excepturi enim.
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </header>
807
+ <nav class="fd-menu" aria-label="options with header, subheader and footer">
808
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
809
+ <li class="fd-menu__item">
810
+ <a class="fd-menu__link" href="#">
811
+ <span class="fd-menu__title">Option 1</span>
812
+ </a>
813
+ </li>
814
+ <li class="fd-menu__item">
815
+ <a class="fd-menu__link" href="#">
816
+ <span class="fd-menu__title">Option 2</span>
817
+ </a>
818
+ </li>
819
+ <li class="fd-menu__item">
820
+ <a class="fd-menu__link" href="#">
821
+ <span class="fd-menu__title">Option 3</span>
822
+ </a>
823
+ </li>
824
+ </ul>
825
+ </nav>
826
+ <footer class="fd-popover__body-footer">
827
+ <div class="fd-bar is-compact fd-bar--footer">
828
+ <div class="fd-bar__right">
829
+ <div class="fd-bar__element">
830
+ <button class="fd-button fd-button--emphasized">Save</button>
831
+ </div>
832
+ <div class="fd-bar__element">
833
+ <button class="fd-button fd-button--transparent">Cancel</button>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ </footer>
838
+ </section>
839
+ </div>
840
+ ```
841
+
842
+ ### Control variants
843
+
844
+ As popover's triggers buttons, images, icons, and more can be used. In the example below, the **Avatar** and **Icon** act as triggers.
845
+
846
+ ```html
847
+ <div class="fd-container">
848
+ <div class="fd-row">
849
+ <div class="fd-col--3 fd-col--offset-3">
850
+ <div class="fd-popover fd-popover--right">
851
+ <div class="fd-popover__control">
852
+ <span
853
+ class="fd-avatar fd-avatar--s fd-avatar--circle fd-avatar--thumbnail"
854
+ aria-controls="popoverB2"
855
+ aria-expanded="true"
856
+ aria-haspopup="true"
857
+ aria-label="Avatar"
858
+
859
+ onclick="onPopoverClick('popoverB2');"
860
+ role="button"
861
+ tabindex="0"></span>
862
+ </div>
863
+ <div class="fd-popover__body fd-popover__body--left" aria-hidden="false" id="popoverB2">
864
+ <nav class="fd-menu" aria-label="navigation items">
865
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
866
+ <li class="fd-menu__item">
867
+ <a class="fd-menu__link" href="#">
868
+ <span class="fd-menu__title">Option 1</span>
869
+ </a>
870
+ </li>
871
+ <li class="fd-menu__item">
872
+ <a class="fd-menu__link" href="#">
873
+ <span class="fd-menu__title">Option 2</span>
874
+ </a>
875
+ </li>
876
+ <li class="fd-menu__item">
877
+ <a class="fd-menu__link" href="#">
878
+ <span class="fd-menu__title">Option 3</span>
879
+ </a>
880
+ </li>
881
+ <li class="fd-menu__item">
882
+ <a class="fd-menu__link" href="#">
883
+ <span class="fd-menu__title">Option 4</span>
884
+ </a>
885
+ </li>
886
+ </ul>
887
+ </nav>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ <div class="fd-col--3 fd-col--offset-3">
892
+ <div class="fd-popover">
893
+ <div class="fd-popover__control">
894
+ <button
895
+ class="fd-button"
896
+ aria-label="Cart"
897
+ aria-controls="popoverB4"
898
+ aria-expanded="true"
899
+ aria-haspopup="true"
900
+ onclick="onPopoverClick('popoverB4');"
901
+ role="button">
902
+ <!- role is needed to override the combobox role due to aria-haspopup -->
903
+ <i class="sap-icon--cart" role="presentation"></i>
904
+ </button>
905
+ </div>
906
+ <div class="fd-popover__body" aria-hidden="false" id="popoverB4">
907
+ <nav class="fd-menu" aria-label="options triggered by icon button">
908
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
909
+ <li class="fd-menu__item">
910
+ <a class="fd-menu__link" href="#">
911
+ <span class="fd-menu__title">Option 1</span>
912
+ </a>
913
+ </li>
914
+ <li class="fd-menu__item">
915
+ <a class="fd-menu__link" href="#">
916
+ <span class="fd-menu__title">Option 2</span>
917
+ </a>
918
+ </li>
919
+ <li class="fd-menu__item">
920
+ <a class="fd-menu__link" href="#">
921
+ <span class="fd-menu__title">Option 3</span>
922
+ </a>
923
+ </li>
924
+ <li class="fd-menu__item">
925
+ <a class="fd-menu__link" href="#">
926
+ <span class="fd-menu__title">Option 4</span>
927
+ </a>
928
+ </li>
929
+ </ul>
930
+ </nav>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ </div>
935
+ </div>
936
+ ```
937
+
938
+ ### Scrollable
939
+
940
+ When the content overflows, the popover body can become scrollable. To achieve this, add element with class \
941
+
942
+ ```html
943
+ <div class="fd-popover">
944
+ <div class="fd-popover__control">
945
+ <button
946
+ class="fd-button"
947
+ aria-controls="popoverF1"
948
+ aria-expanded="true"
949
+ aria-haspopup="true"
950
+ onclick="onPopoverClick('popoverF1');"
951
+ role="button">
952
+ <!- role is needed to override the combobox role due to aria-haspopup -->
953
+ Popover with overflow
954
+ </button>
955
+ </div>
956
+ <div class="fd-popover__body" aria-hidden="false" id="popoverF1">
957
+ <div class="fd-popover__wrapper">
958
+ <nav class="fd-menu" aria-label="big navigation menu">
959
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
960
+ <li class="fd-menu__item">
961
+ <a class="fd-menu__link" href="#">
962
+ <span class="fd-menu__title">Option 1</span>
963
+ </a>
964
+ </li>
965
+ <li class="fd-menu__item">
966
+ <a class="fd-menu__link" href="#">
967
+ <span class="fd-menu__title">Option 2</span>
968
+ </a>
969
+ </li>
970
+ <li class="fd-menu__item">
971
+ <a class="fd-menu__link" href="#">
972
+ <span class="fd-menu__title">Option 3</span>
973
+ </a>
974
+ </li>
975
+ <li class="fd-menu__item">
976
+ <a class="fd-menu__link" href="#">
977
+ <span class="fd-menu__title">Option 4</span>
978
+ </a>
979
+ </li>
980
+ <li class="fd-menu__item">
981
+ <a class="fd-menu__link" href="#">
982
+ <span class="fd-menu__title">Option 5</span>
983
+ </a>
984
+ </li>
985
+ <li class="fd-menu__item">
986
+ <a class="fd-menu__link" href="#">
987
+ <span class="fd-menu__title">Option 6</span>
988
+ </a>
989
+ </li>
990
+ <li class="fd-menu__item">
991
+ <a class="fd-menu__link" href="#">
992
+ <span class="fd-menu__title">Option 7</span>
993
+ </a>
994
+ </li>
995
+ <li class="fd-menu__item">
996
+ <a class="fd-menu__link" href="#">
997
+ <span class="fd-menu__title">Option 8</span>
998
+ </a>
999
+ </li>
1000
+ </ul>
1001
+ </nav>
1002
+ </div>
1003
+ </div>
1004
+ </div>
1005
+ ```
1006
+
1007
+ ### Placement
1008
+
1009
+ It's possible to show popover on different sides of the trigger. To do that apply the following modifier classes to the popover body element.
1010
+
1011
+ | Modifier | Description |
1012
+ | :---- | :---------- |
1013
+ | \
1014
+
1015
+ ```html
1016
+ <div class="fd-popover">
1017
+ <div class="fd-popover__control">
1018
+ <button
1019
+ class="fd-button"
1020
+ aria-controls="popoverF1"
1021
+ aria-expanded="true"
1022
+ aria-haspopup="true"
1023
+ onclick="onPopoverClick('popoverF1');"
1024
+ role="button"
1025
+ >
1026
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1027
+ </button>
1028
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--arrow-bottom" aria-hidden="false" id="popoverF1">
1029
+ <div class="fd-popover__wrapper">
1030
+ <nav class="fd-menu" aria-label="big navigation menu">
1031
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1032
+ <li class="fd-menu__item">
1033
+ <a class="fd-menu__link" href="#">
1034
+ <span class="fd-menu__title">Option 1</span>
1035
+ </a>
1036
+ </li>
1037
+ <li class="fd-menu__item">
1038
+ <a class="fd-menu__link" href="#">
1039
+ <span class="fd-menu__title">Option 2</span>
1040
+ </a>
1041
+ </li>
1042
+ </ul>
1043
+ </nav>
1044
+ </div>
1045
+ </div>
1046
+ </div>
1047
+
1048
+ <div class="fd-popover">
1049
+ <div class="fd-popover__control">
1050
+ <button
1051
+ class="fd-button"
1052
+ aria-controls="popoverF1a"
1053
+ aria-expanded="true"
1054
+ aria-haspopup="true"
1055
+ onclick="onPopoverClick('popoverF1a');"
1056
+ role="button"
1057
+ >
1058
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1059
+ </button>
1060
+ </div>
1061
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--center fd-popover__body--arrow-bottom fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF1a">
1062
+ <div class="fd-popover__wrapper">
1063
+ <nav class="fd-menu" aria-label="big navigation menu">
1064
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1065
+ <li class="fd-menu__item">
1066
+ <a class="fd-menu__link" href="#">
1067
+ <span class="fd-menu__title">Option 1</span>
1068
+ </a>
1069
+ </li>
1070
+ <li class="fd-menu__item">
1071
+ <a class="fd-menu__link" href="#">
1072
+ <span class="fd-menu__title">Option 2</span>
1073
+ </a>
1074
+ </li>
1075
+ </ul>
1076
+ </nav>
1077
+ </div>
1078
+ </div>
1079
+ </div>
1080
+
1081
+ <div class="fd-popover">
1082
+ <div class="fd-popover__control">
1083
+ <button
1084
+ class="fd-button"
1085
+ aria-controls="popoverF1b"
1086
+ aria-expanded="true"
1087
+ aria-haspopup="true"
1088
+ onclick="onPopoverClick('popoverF1b');"
1089
+ role="button"
1090
+ >
1091
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1092
+ </button>
1093
+ </div>
1094
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--right fd-popover__body--arrow-bottom fd-popover__body--arrow-x-end" aria-hidden="false" id="popoverF1b">
1095
+ <div class="fd-popover__wrapper">
1096
+ <nav class="fd-menu" aria-label="big navigation menu">
1097
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1098
+ <li class="fd-menu__item">
1099
+ <a class="fd-menu__link" href="#">
1100
+ <span class="fd-menu__title">Option 1</span>
1101
+ </a>
1102
+ </li>
1103
+ <li class="fd-menu__item">
1104
+ <a class="fd-menu__link" href="#">
1105
+ <span class="fd-menu__title">Option 2</span>
1106
+ </a>
1107
+ </li>
1108
+ </ul>
1109
+ </nav>
1110
+ </div>
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+
1115
+ <div class="fd-popover">
1116
+ <div class="fd-popover__control">
1117
+ <button
1118
+ class="fd-button"
1119
+ aria-controls="popoverF1c"
1120
+ aria-expanded="true"
1121
+ aria-haspopup="true"
1122
+ onclick="onPopoverClick('popoverF1c');"
1123
+ role="button"
1124
+ >
1125
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1126
+ </button>
1127
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--arrow-right" aria-hidden="false" id="popoverF1c">
1128
+ <div class="fd-popover__wrapper">
1129
+ <nav class="fd-menu" aria-label="big navigation menu">
1130
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1131
+ <li class="fd-menu__item">
1132
+ <a class="fd-menu__link" href="#">
1133
+ <span class="fd-menu__title">Option 1</span>
1134
+ </a>
1135
+ </li>
1136
+ <li class="fd-menu__item">
1137
+ <a class="fd-menu__link" href="#">
1138
+ <span class="fd-menu__title">Option 2</span>
1139
+ </a>
1140
+ </li>
1141
+ </ul>
1142
+ </nav>
1143
+ </div>
1144
+ </div>
1145
+ </div>
1146
+
1147
+ <div class="fd-popover">
1148
+ <div class="fd-popover__control">
1149
+ <button
1150
+ class="fd-button"
1151
+ aria-controls="popoverF1d"
1152
+ aria-expanded="true"
1153
+ aria-haspopup="true"
1154
+ onclick="onPopoverClick('popoverF1d');"
1155
+ role="button"
1156
+ >
1157
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1158
+ </button>
1159
+ </div>
1160
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" aria-hidden="false" id="popoverF1d">
1161
+ <div class="fd-popover__wrapper">
1162
+ <nav class="fd-menu" aria-label="big navigation menu">
1163
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1164
+ <li class="fd-menu__item">
1165
+ <a class="fd-menu__link" href="#">
1166
+ <span class="fd-menu__title">Option 1</span>
1167
+ </a>
1168
+ </li>
1169
+ <li class="fd-menu__item">
1170
+ <a class="fd-menu__link" href="#">
1171
+ <span class="fd-menu__title">Option 2</span>
1172
+ </a>
1173
+ </li>
1174
+ </ul>
1175
+ </nav>
1176
+ </div>
1177
+ </div>
1178
+ </div>
1179
+ </div>
1180
+
1181
+ <div class="fd-popover">
1182
+ <div class="fd-popover__control">
1183
+ <button
1184
+ class="fd-button"
1185
+ aria-controls="popoverF1e"
1186
+ aria-expanded="true"
1187
+ aria-haspopup="true"
1188
+ onclick="onPopoverClick('popoverF1e');"
1189
+ role="button"
1190
+ >
1191
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1192
+ </button>
1193
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--middle fd-popover__body--arrow-right fd-popover__body--arrow-y-center" aria-hidden="false" id="popoverF1e">
1194
+ <div class="fd-popover__wrapper">
1195
+ <nav class="fd-menu" aria-label="big navigation menu">
1196
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1197
+ <li class="fd-menu__item">
1198
+ <a class="fd-menu__link" href="#">
1199
+ <span class="fd-menu__title">Option 1</span>
1200
+ </a>
1201
+ </li>
1202
+ <li class="fd-menu__item">
1203
+ <a class="fd-menu__link" href="#">
1204
+ <span class="fd-menu__title">Option 2</span>
1205
+ </a>
1206
+ </li>
1207
+ </ul>
1208
+ </nav>
1209
+ </div>
1210
+ </div>
1211
+ </div>
1212
+
1213
+ <div class="fd-popover">
1214
+ <div class="fd-popover__control">
1215
+ <button
1216
+ class="fd-button"
1217
+ aria-controls="popoverF1f"
1218
+ aria-expanded="true"
1219
+ aria-haspopup="true"
1220
+ onclick="onPopoverClick('popoverF1f');"
1221
+ role="button"
1222
+ >
1223
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1224
+ </button>
1225
+ </div>
1226
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--middle fd-popover__body--arrow-left fd-popover__body--arrow-y-center" aria-hidden="false" id="popoverF1f">
1227
+ <div class="fd-popover__wrapper">
1228
+ <nav class="fd-menu" aria-label="big navigation menu">
1229
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1230
+ <li class="fd-menu__item">
1231
+ <a class="fd-menu__link" href="#">
1232
+ <span class="fd-menu__title">Option 1</span>
1233
+ </a>
1234
+ </li>
1235
+ <li class="fd-menu__item">
1236
+ <a class="fd-menu__link" href="#">
1237
+ <span class="fd-menu__title">Option 2</span>
1238
+ </a>
1239
+ </li>
1240
+ </ul>
1241
+ </nav>
1242
+ </div>
1243
+ </div>
1244
+ </div>
1245
+ </div>
1246
+
1247
+ <div class="fd-popover">
1248
+ <div class="fd-popover__control">
1249
+ <button
1250
+ class="fd-button"
1251
+ aria-controls="popoverF1g"
1252
+ aria-expanded="true"
1253
+ aria-haspopup="true"
1254
+ onclick="onPopoverClick('popoverF1g');"
1255
+ role="button"
1256
+ >
1257
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1258
+ </button>
1259
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--bottom fd-popover__body--arrow-right fd-popover__body--arrow-y-bottom" aria-hidden="false" id="popoverF1g">
1260
+ <div class="fd-popover__wrapper">
1261
+ <nav class="fd-menu" aria-label="big navigation menu">
1262
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1263
+ <li class="fd-menu__item">
1264
+ <a class="fd-menu__link" href="#">
1265
+ <span class="fd-menu__title">Option 1</span>
1266
+ </a>
1267
+ </li>
1268
+ <li class="fd-menu__item">
1269
+ <a class="fd-menu__link" href="#">
1270
+ <span class="fd-menu__title">Option 2</span>
1271
+ </a>
1272
+ </li>
1273
+ </ul>
1274
+ </nav>
1275
+ </div>
1276
+ </div>
1277
+ </div>
1278
+
1279
+ <div class="fd-popover">
1280
+ <div class="fd-popover__control">
1281
+ <button
1282
+ class="fd-button"
1283
+ aria-controls="popoverF1h"
1284
+ aria-expanded="true"
1285
+ aria-haspopup="true"
1286
+ onclick="onPopoverClick('popoverF1h');"
1287
+ role="button"
1288
+ >
1289
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1290
+ </button>
1291
+ </div>
1292
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--bottom fd-popover__body--arrow-left fd-popover__body--arrow-y-bottom" aria-hidden="false" id="popoverF1h">
1293
+ <div class="fd-popover__wrapper">
1294
+ <nav class="fd-menu" aria-label="big navigation menu">
1295
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1296
+ <li class="fd-menu__item">
1297
+ <a class="fd-menu__link" href="#">
1298
+ <span class="fd-menu__title">Option 1</span>
1299
+ </a>
1300
+ </li>
1301
+ <li class="fd-menu__item">
1302
+ <a class="fd-menu__link" href="#">
1303
+ <span class="fd-menu__title">Option 2</span>
1304
+ </a>
1305
+ </li>
1306
+ </ul>
1307
+ </nav>
1308
+ </div>
1309
+ </div>
1310
+ </div>
1311
+ </div>
1312
+
1313
+ <div class="fd-popover">
1314
+ <div class="fd-popover__control">
1315
+ <button
1316
+ class="fd-button"
1317
+ aria-controls="popoverF1i"
1318
+ aria-expanded="true"
1319
+ aria-haspopup="true"
1320
+ onclick="onPopoverClick('popoverF1i');"
1321
+ role="button"
1322
+ >
1323
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1324
+ </button>
1325
+ <div class="fd-popover__body" aria-hidden="false" id="popoverF1i">
1326
+ <div class="fd-popover__wrapper">
1327
+ <nav class="fd-menu" aria-label="big navigation menu">
1328
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1329
+ <li class="fd-menu__item">
1330
+ <a class="fd-menu__link" href="#">
1331
+ <span class="fd-menu__title">Option 1</span>
1332
+ </a>
1333
+ </li>
1334
+ <li class="fd-menu__item">
1335
+ <a class="fd-menu__link" href="#">
1336
+ <span class="fd-menu__title">Option 2</span>
1337
+ </a>
1338
+ </li>
1339
+ </ul>
1340
+ </nav>
1341
+ </div>
1342
+ </div>
1343
+ </div>
1344
+
1345
+ <div class="fd-popover">
1346
+ <div class="fd-popover__control">
1347
+ <button
1348
+ class="fd-button"
1349
+ aria-controls="popoverF1j"
1350
+ aria-expanded="true"
1351
+ aria-haspopup="true"
1352
+ onclick="onPopoverClick('popoverF1j');"
1353
+ role="button"
1354
+ >
1355
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1356
+ </button>
1357
+ </div>
1358
+ <div class="fd-popover__body fd-popover__body--center fd-popover__body--arrow-x-center" aria-hidden="false" id="popoverF1j">
1359
+ <div class="fd-popover__wrapper">
1360
+ <nav class="fd-menu" aria-label="big navigation menu">
1361
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1362
+ <li class="fd-menu__item">
1363
+ <a class="fd-menu__link" href="#">
1364
+ <span class="fd-menu__title">Option 1</span>
1365
+ </a>
1366
+ </li>
1367
+ <li class="fd-menu__item">
1368
+ <a class="fd-menu__link" href="#">
1369
+ <span class="fd-menu__title">Option 2</span>
1370
+ </a>
1371
+ </li>
1372
+ </ul>
1373
+ </nav>
1374
+ </div>
1375
+ </div>
1376
+ </div>
1377
+
1378
+ <div class="fd-popover">
1379
+ <div class="fd-popover__control">
1380
+ <button
1381
+ class="fd-button"
1382
+ aria-controls="popoverF1k"
1383
+ aria-expanded="true"
1384
+ aria-haspopup="true"
1385
+ onclick="onPopoverClick('popoverF1k');"
1386
+ role="button"
1387
+ >
1388
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1389
+ </button>
1390
+ </div>
1391
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--arrow-x-end" aria-hidden="false" id="popoverF1k">
1392
+ <div class="fd-popover__wrapper">
1393
+ <nav class="fd-menu" aria-label="big navigation menu">
1394
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1395
+ <li class="fd-menu__item">
1396
+ <a class="fd-menu__link" href="#">
1397
+ <span class="fd-menu__title">Option 1</span>
1398
+ </a>
1399
+ </li>
1400
+ <li class="fd-menu__item">
1401
+ <a class="fd-menu__link" href="#">
1402
+ <span class="fd-menu__title">Option 2</span>
1403
+ </a>
1404
+ </li>
1405
+ </ul>
1406
+ </nav>
1407
+ </div>
1408
+ </div>
1409
+ </div>
1410
+ </div>
1411
+ ```
1412
+
1413
+ ### NoArrow
1414
+
1415
+ It's possible to hide popover's arrow.
1416
+ To achieve this apply the \
1417
+
1418
+ ```html
1419
+ <div class="fd-popover">
1420
+ <div class="fd-popover__control">
1421
+ <button
1422
+ class="fd-button"
1423
+ aria-controls="popoverF1"
1424
+ aria-expanded="true"
1425
+ aria-haspopup="true"
1426
+ onClick="onPopoverClick('popoverF1');"
1427
+ role="button"
1428
+ >
1429
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1430
+ </button>
1431
+ </div>
1432
+ <div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="false" id="popoverF1">
1433
+ <div class="fd-popover__wrapper">
1434
+ <nav class="fd-menu" aria-label="big navigation menu">
1435
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1436
+ <li class="fd-menu__item">
1437
+ <a class="fd-menu__link" href="#">
1438
+ <span class="fd-menu__title">Option 1</span>
1439
+ </a>
1440
+ </li>
1441
+ <li class="fd-menu__item">
1442
+ <a class="fd-menu__link" href="#">
1443
+ <span class="fd-menu__title">Option 2</span>
1444
+ </a>
1445
+ </li>
1446
+ </ul>
1447
+ </nav>
1448
+ </div>
1449
+ </div>
1450
+ </div>
1451
+ ```
1452
+
1453
+ ### Resizable
1454
+
1455
+ ```html
1456
+ <div class="fd-popover">
1457
+ <div class="fd-popover__control">
1458
+ <button
1459
+ class="fd-button"
1460
+ aria-controls="popoverF1r"
1461
+ aria-expanded="true"
1462
+ aria-haspopup="true"
1463
+ onclick="onPopoverClick('popoverF1r');"
1464
+ role="button"
1465
+ >
1466
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1467
+ </button>
1468
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--arrow-bottom fd-popover__body--resizable" aria-hidden="false" id="popoverF1r">
1469
+ <div class="fd-popover__wrapper">
1470
+ <nav class="fd-menu" aria-label="big navigation menu">
1471
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1472
+ <li class="fd-menu__item">
1473
+ <a class="fd-menu__link" href="#">
1474
+ <span class="fd-menu__title">Option 1</span>
1475
+ </a>
1476
+ </li>
1477
+ <li class="fd-menu__item">
1478
+ <a class="fd-menu__link" href="#">
1479
+ <span class="fd-menu__title">Option 2</span>
1480
+ </a>
1481
+ </li>
1482
+ </ul>
1483
+ </nav>
1484
+
1485
+ </div>
1486
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1487
+ </div>
1488
+ </div>
1489
+
1490
+ <div class="fd-popover">
1491
+ <div class="fd-popover__control">
1492
+ <button
1493
+ class="fd-button"
1494
+ aria-controls="popoverF2r"
1495
+ aria-expanded="true"
1496
+ aria-haspopup="true"
1497
+ onclick="onPopoverClick('popoverF2r');"
1498
+ role="button"
1499
+ >
1500
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1501
+ </button>
1502
+ </div>
1503
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--center fd-popover__body--arrow-bottom fd-popover__body--arrow-x-center fd-popover__body--resizable" aria-hidden="false" id="popoverF2r">
1504
+ <div class="fd-popover__wrapper">
1505
+ <nav class="fd-menu" aria-label="big navigation menu">
1506
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1507
+ <li class="fd-menu__item">
1508
+ <a class="fd-menu__link" href="#">
1509
+ <span class="fd-menu__title">Option 3</span>
1510
+ </a>
1511
+ </li>
1512
+ <li class="fd-menu__item">
1513
+ <a class="fd-menu__link" href="#">
1514
+ <span class="fd-menu__title">Option 4</span>
1515
+ </a>
1516
+ </li>
1517
+ </ul>
1518
+ </nav>
1519
+ </div>
1520
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1521
+ </div>
1522
+ </div>
1523
+
1524
+ <div class="fd-popover">
1525
+ <div class="fd-popover__control">
1526
+ <button
1527
+ class="fd-button"
1528
+ aria-controls="popoverF3r"
1529
+ aria-expanded="true"
1530
+ aria-haspopup="true"
1531
+ onclick="onPopoverClick('popoverF3r');"
1532
+ role="button"
1533
+ >
1534
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1535
+ </button>
1536
+ </div>
1537
+ <div class="fd-popover__body fd-popover__body--above fd-popover__body--right fd-popover__body--arrow-bottom fd-popover__body--arrow-x-end fd-popover__body--resizable" aria-hidden="false" id="popoverF3r">
1538
+ <div class="fd-popover__wrapper">
1539
+ <nav class="fd-menu" aria-label="big navigation menu">
1540
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1541
+ <li class="fd-menu__item">
1542
+ <a class="fd-menu__link" href="#">
1543
+ <span class="fd-menu__title">Option 5</span>
1544
+ </a>
1545
+ </li>
1546
+ <li class="fd-menu__item">
1547
+ <a class="fd-menu__link" href="#">
1548
+ <span class="fd-menu__title">Option 6</span>
1549
+ </a>
1550
+ </li>
1551
+ </ul>
1552
+ </nav>
1553
+ </div>
1554
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1555
+ </div>
1556
+ </div>
1557
+ </div>
1558
+
1559
+ <div class="fd-popover">
1560
+ <div class="fd-popover__control">
1561
+ <button
1562
+ class="fd-button"
1563
+ aria-controls="popoverF4r"
1564
+ aria-expanded="true"
1565
+ aria-haspopup="true"
1566
+ onclick="onPopoverClick('popoverF4r');"
1567
+ role="button"
1568
+ >
1569
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1570
+ </button>
1571
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--arrow-right fd-popover__body--resizable" aria-hidden="false" id="popoverF4r">
1572
+ <div class="fd-popover__wrapper">
1573
+ <nav class="fd-menu" aria-label="big navigation menu">
1574
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1575
+ <li class="fd-menu__item">
1576
+ <a class="fd-menu__link" href="#">
1577
+ <span class="fd-menu__title">Option 7</span>
1578
+ </a>
1579
+ </li>
1580
+ <li class="fd-menu__item">
1581
+ <a class="fd-menu__link" href="#">
1582
+ <span class="fd-menu__title">Option 8</span>
1583
+ </a>
1584
+ </li>
1585
+ </ul>
1586
+ </nav>
1587
+ </div>
1588
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1589
+ </div>
1590
+ </div>
1591
+
1592
+ <div class="fd-popover">
1593
+ <div class="fd-popover__control">
1594
+ <button
1595
+ class="fd-button"
1596
+ aria-controls="popoverF5r"
1597
+ aria-expanded="true"
1598
+ aria-haspopup="true"
1599
+ onclick="onPopoverClick('popoverF5r');"
1600
+ role="button"
1601
+ >
1602
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1603
+ </button>
1604
+ </div>
1605
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--arrow-left fd-popover__body--resizable" aria-hidden="false" id="popoverF5r">
1606
+ <div class="fd-popover__wrapper">
1607
+ <nav class="fd-menu" aria-label="big navigation menu">
1608
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1609
+ <li class="fd-menu__item">
1610
+ <a class="fd-menu__link" href="#">
1611
+ <span class="fd-menu__title">Option 9</span>
1612
+ </a>
1613
+ </li>
1614
+ <li class="fd-menu__item">
1615
+ <a class="fd-menu__link" href="#">
1616
+ <span class="fd-menu__title">Option 10</span>
1617
+ </a>
1618
+ </li>
1619
+ </ul>
1620
+ </nav>
1621
+ </div>
1622
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1623
+ </div>
1624
+ </div>
1625
+ </div>
1626
+
1627
+ <div class="fd-popover">
1628
+ <div class="fd-popover__control">
1629
+ <button
1630
+ class="fd-button"
1631
+ aria-controls="popoverF6r"
1632
+ aria-expanded="true"
1633
+ aria-haspopup="true"
1634
+ onclick="onPopoverClick('popoverF6r');"
1635
+ role="button"
1636
+ >
1637
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1638
+ </button>
1639
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--middle fd-popover__body--arrow-right fd-popover__body--arrow-y-center fd-popover__body--resizable" aria-hidden="false" id="popoverF6r">
1640
+ <div class="fd-popover__wrapper">
1641
+ <nav class="fd-menu" aria-label="big navigation menu">
1642
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1643
+ <li class="fd-menu__item">
1644
+ <a class="fd-menu__link" href="#">
1645
+ <span class="fd-menu__title">Option 11</span>
1646
+ </a>
1647
+ </li>
1648
+ <li class="fd-menu__item">
1649
+ <a class="fd-menu__link" href="#">
1650
+ <span class="fd-menu__title">Option 12</span>
1651
+ </a>
1652
+ </li>
1653
+ </ul>
1654
+ </nav>
1655
+ </div>
1656
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1657
+ </div>
1658
+ </div>
1659
+
1660
+ <div class="fd-popover">
1661
+ <div class="fd-popover__control">
1662
+ <button
1663
+ class="fd-button"
1664
+ aria-controls="popoverF7r"
1665
+ aria-expanded="true"
1666
+ aria-haspopup="true"
1667
+ onclick="onPopoverClick('popoverF7r');"
1668
+ role="button"
1669
+ >
1670
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1671
+ </button>
1672
+ </div>
1673
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--middle fd-popover__body--arrow-left fd-popover__body--arrow-y-center fd-popover__body--resizable" aria-hidden="false" id="popoverF7r">
1674
+ <div class="fd-popover__wrapper">
1675
+ <nav class="fd-menu" aria-label="big navigation menu">
1676
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1677
+ <li class="fd-menu__item">
1678
+ <a class="fd-menu__link" href="#">
1679
+ <span class="fd-menu__title">Option 13</span>
1680
+ </a>
1681
+ </li>
1682
+ <li class="fd-menu__item">
1683
+ <a class="fd-menu__link" href="#">
1684
+ <span class="fd-menu__title">Option 14</span>
1685
+ </a>
1686
+ </li>
1687
+ </ul>
1688
+ </nav>
1689
+ </div>
1690
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1691
+ </div>
1692
+ </div>
1693
+ </div>
1694
+
1695
+ <div class="fd-popover">
1696
+ <div class="fd-popover__control">
1697
+ <button
1698
+ class="fd-button"
1699
+ aria-controls="popoverF8r"
1700
+ aria-expanded="true"
1701
+ aria-haspopup="true"
1702
+ onclick="onPopoverClick('popoverF8r');"
1703
+ role="button"
1704
+ >
1705
+ <i class="sap-icon--navigation-left-arrow" role="presentation"></i>
1706
+ </button>
1707
+ <div class="fd-popover__body fd-popover__body--before fd-popover__body--bottom fd-popover__body--arrow-right fd-popover__body--arrow-y-bottom fd-popover__body--resizable" aria-hidden="false" id="popoverF8r">
1708
+ <div class="fd-popover__wrapper">
1709
+ <nav class="fd-menu" aria-label="big navigation menu">
1710
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1711
+ <li class="fd-menu__item">
1712
+ <a class="fd-menu__link" href="#">
1713
+ <span class="fd-menu__title">Option 15</span>
1714
+ </a>
1715
+ </li>
1716
+ <li class="fd-menu__item">
1717
+ <a class="fd-menu__link" href="#">
1718
+ <span class="fd-menu__title">Option 16</span>
1719
+ </a>
1720
+ </li>
1721
+ </ul>
1722
+ </nav>
1723
+ </div>
1724
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1725
+ </div>
1726
+ </div>
1727
+
1728
+ <div class="fd-popover">
1729
+ <div class="fd-popover__control">
1730
+ <button
1731
+ class="fd-button"
1732
+ aria-controls="popoverF9r"
1733
+ aria-expanded="true"
1734
+ aria-haspopup="true"
1735
+ onclick="onPopoverClick('popoverF9r');"
1736
+ role="button"
1737
+ >
1738
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1739
+ </button>
1740
+ </div>
1741
+ <div class="fd-popover__body fd-popover__body--after fd-popover__body--bottom fd-popover__body--arrow-left fd-popover__body--arrow-y-bottom fd-popover__body--resizable" aria-hidden="false" id="popoverF9r">
1742
+ <div class="fd-popover__wrapper">
1743
+ <nav class="fd-menu" aria-label="big navigation menu">
1744
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1745
+ <li class="fd-menu__item">
1746
+ <a class="fd-menu__link" href="#">
1747
+ <span class="fd-menu__title">Option 17</span>
1748
+ </a>
1749
+ </li>
1750
+ <li class="fd-menu__item">
1751
+ <a class="fd-menu__link" href="#">
1752
+ <span class="fd-menu__title">Option 18</span>
1753
+ </a>
1754
+ </li>
1755
+ </ul>
1756
+ </nav>
1757
+ </div>
1758
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1759
+ </div>
1760
+ </div>
1761
+ </div>
1762
+
1763
+ <div class="fd-popover">
1764
+ <div class="fd-popover__control">
1765
+ <button
1766
+ class="fd-button"
1767
+ aria-controls="popoverF10r"
1768
+ aria-expanded="true"
1769
+ aria-haspopup="true"
1770
+ onclick="onPopoverClick('popoverF10r');"
1771
+ role="button"
1772
+ >
1773
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1774
+ </button>
1775
+ <div class="fd-popover__body fd-popover__body--resizable" aria-hidden="false" id="popoverF10r">
1776
+ <div class="fd-popover__wrapper">
1777
+ <nav class="fd-menu" aria-label="big navigation menu">
1778
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1779
+ <li class="fd-menu__item">
1780
+ <a class="fd-menu__link" href="#">
1781
+ <span class="fd-menu__title">Option 19</span>
1782
+ </a>
1783
+ </li>
1784
+ <li class="fd-menu__item">
1785
+ <a class="fd-menu__link" href="#">
1786
+ <span class="fd-menu__title">Option 20</span>
1787
+ </a>
1788
+ </li>
1789
+ </ul>
1790
+ </nav>
1791
+ </div>
1792
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1793
+ </div>
1794
+ </div>
1795
+
1796
+ <div class="fd-popover">
1797
+ <div class="fd-popover__control">
1798
+ <button
1799
+ class="fd-button"
1800
+ aria-controls="popoverF11r"
1801
+ aria-expanded="true"
1802
+ aria-haspopup="true"
1803
+ onclick="onPopoverClick('popoverF11r');"
1804
+ role="button"
1805
+ >
1806
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1807
+ </button>
1808
+ </div>
1809
+ <div class="fd-popover__body fd-popover__body--center fd-popover__body--arrow-x-center fd-popover__body--resizable" aria-hidden="false" id="popoverF11r">
1810
+ <div class="fd-popover__wrapper">
1811
+ <nav class="fd-menu" aria-label="big navigation menu">
1812
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1813
+ <li class="fd-menu__item">
1814
+ <a class="fd-menu__link" href="#">
1815
+ <span class="fd-menu__title">Option 21</span>
1816
+ </a>
1817
+ </li>
1818
+ <li class="fd-menu__item">
1819
+ <a class="fd-menu__link" href="#">
1820
+ <span class="fd-menu__title">Option 22</span>
1821
+ </a>
1822
+ </li>
1823
+ </ul>
1824
+ </nav>
1825
+ </div>
1826
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1827
+ </div>
1828
+ </div>
1829
+
1830
+ <div class="fd-popover">
1831
+ <div class="fd-popover__control">
1832
+ <button
1833
+ class="fd-button"
1834
+ aria-controls="popoverF12r"
1835
+ aria-expanded="true"
1836
+ aria-haspopup="true"
1837
+ onclick="onPopoverClick('popoverF12r');"
1838
+ role="button"
1839
+ >
1840
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1841
+ </button>
1842
+ </div>
1843
+ <div class="fd-popover__body fd-popover__body--right fd-popover__body--arrow-x-end fd-popover__body--resizable" aria-hidden="false" id="popoverF12r">
1844
+ <div class="fd-popover__wrapper">
1845
+ <nav class="fd-menu" aria-label="big navigation menu">
1846
+ <ul class="fd-menu__list fd-menu__list--no-shadow">
1847
+ <li class="fd-menu__item">
1848
+ <a class="fd-menu__link" href="#">
1849
+ <span class="fd-menu__title">Option 23</span>
1850
+ </a>
1851
+ </li>
1852
+ <li class="fd-menu__item">
1853
+ <a class="fd-menu__link" href="#">
1854
+ <span class="fd-menu__title">Option 24</span>
1855
+ </a>
1856
+ </li>
1857
+ </ul>
1858
+ </nav>
1859
+ </div>
1860
+ <span class="fd-popover__resize-handle" role="presentation" aria-hidden="true"></span>
1861
+ </div>
1862
+ </div>
1863
+ </div>
1864
+ ```
1865
+
1866
+ ### BTP Popover
1867
+
1868
+ This extension of Popover is used by components and patterns in the BTP area. Apply the <code>.fd-popover--btp</code> modifier class to <code>.fd-popover</code> base class. <br>To add padding to the Popover body use the <code>.fd-popover__body--padding</code> modifier class together with <code>.fd-popover__body</code> base class. <br>The content of the footer can be centered by using the <code>.fd-popover__body-footer--center</code> modifier.
1869
+
1870
+ ```html
1871
+ <div class="fd-container">
1872
+ <div class="fd-row">
1873
+ <div class="fd-col--3 fd-col--offset-3">
1874
+ <div class="fd-popover fd-popover--btp">
1875
+ <div class="fd-popover__control">
1876
+ <button
1877
+ class="fd-button"
1878
+ aria-label="Cart"
1879
+ aria-controls="popoverB4Btp"
1880
+ aria-expanded="true"
1881
+ aria-haspopup="true"
1882
+ onclick="onPopoverClick('popoverB4Btp');"
1883
+ role="button">
1884
+ <i class="sap-icon--cart" role="presentation"></i>
1885
+ </button>
1886
+ </div>
1887
+ <div class="fd-popover__body" aria-hidden="false" id="popoverB4Btp">
1888
+ <div class="fd-popover__body-header">Header (optional, empty container)</div>
1889
+ <div class="fd-popover__body-content">
1890
+ Content (empty container)
1891
+ </div>
1892
+ <div class="fd-popover__body-footer">
1893
+ Footer (optional, empty container)
1894
+ </div>
1895
+ </div>
1896
+ </div>
1897
+ </div>
1898
+ <div class="fd-col--3 fd-col--offset-3">
1899
+ <div class="fd-popover fd-popover--btp">
1900
+ <div class="fd-popover__control">
1901
+ <button
1902
+ class="fd-button"
1903
+ aria-label="Cart"
1904
+ aria-controls="popoverB4B"
1905
+ aria-expanded="true"
1906
+ aria-haspopup="true"
1907
+ onclick="onPopoverClick('popoverB4B');"
1908
+ role="button">
1909
+ <i class="sap-icon--cart" role="presentation"></i>
1910
+ </button>
1911
+ </div>
1912
+ <div class="fd-popover__body fd-popover__body--padding" aria-hidden="false" id="popoverB4BTP">
1913
+ <div class="fd-popover__body-header">Header (optional, empty container)</div>
1914
+ <div class="fd-popover__body-content">
1915
+ Content (empty container)
1916
+ </div>
1917
+ <div class="fd-popover__body-footer fd-popover__body-footer--center">
1918
+ Footer (optional, empty container)
1919
+ </div>
1920
+ </div>
1921
+ </div>
1922
+ </div>
1923
+ </div>
1924
+ </div>
1925
+ ```
1926
+
1927
+ ## Accessibility
1928
+
1929
+ - Use semantic HTML elements where appropriate
1930
+ - Include proper ARIA attributes for interactive elements
1931
+ - Ensure keyboard navigation support
1932
+ - Provide adequate color contrast
1933
+
1934
+ ## Source
1935
+
1936
+ This documentation was automatically generated from: `packages/styles/stories/Components/popover/popover.stories.js`
1937
+
1938
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).