[dev-v5] Popover component #3895

dvoituron · 2025-06-09T14:07:03Z

[dev-v5] Popover component

The FluentPopover component is used to displays content on top of other content.

The FluentPopover is displayed below the target element by default, except when there is not enough space below the target element,
in which case it will be displayed above the target element.
Similarly, if there is insufficient space on the right, the FluentPopover will be displayed to the left of the target.

To display the FluentPopover component, you need to set the Open parameter to true.
This parameter is bindable, so you can control the visibility of the FluentPopover from your code.

<FluentButton Id="MyButton" OnClick="@(e => IsOpened = !IsOpened)">Click</FluentButton>

<FluentPopover AnchorId="MyButton" @bind-Opened="@IsOpened">
    Content of the Popover
</FluentPopover>

@code
{
    bool IsOpened = false;
}

You can add extra spaces between the FluentPopover and the Anchor component using the OffsetVertical and OffsetHorizontal parameters.

Pressing the Escape key will close the FluentPopover if it is open.

Unit Tests

github-actions · 2025-06-09T14:08:43Z

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

github-actions · 2025-06-09T14:14:06Z

Summary - Unit Tests Code Coverage

Summary


Generated on:	06/10/2025 - 16:25:13
Coverage date:	06/10/2025 - 16:25:04
Parser:	Cobertura
Assemblies:	1
Classes:	148
Files:	193
Line coverage:	98.8% (3877 of 3922)
Covered lines:	3877
Uncovered lines:	45
Coverable lines:	3922
Total lines:	16463
Branch coverage:	92% (2069 of 2247)
Covered branches:	2069
Total branches:	2247
Method coverage:	Feature is only available for sponsors
Tag:	3722_15564921030

Coverage

Microsoft.FluentUI.AspNetCore.Components - 98.8%

Name	Line	Branch
Microsoft.FluentUI.AspNetCore.Components	98.8%	92%
Microsoft.FluentUI.AspNetCore.Components.AccordionItemEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.AdditionalAttributesExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.CachedServices	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DateTimeProvider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DateTimeProviderContext	95.6%	92.8%
Microsoft.FluentUI.AspNetCore.Components.DefaultStyles	100%
Microsoft.FluentUI.AspNetCore.Components.DefaultValues	23%	8.3%
Microsoft.FluentUI.AspNetCore.Components.DefaultValuesComponentBuilder`1	0%	0%
Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox.FluentMessageBox	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.DialogInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptions	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooter	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooterAction	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsHeader	100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult`1	100%
Microsoft.FluentUI.AspNetCore.Components.DialogService	100%	82.3%
Microsoft.FluentUI.AspNetCore.Components.DialogToggleEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.DropdownEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.DateTimeExtensions	100%	92%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FieldSizeExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FileSizeConverter	100%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordion	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem	100%	95%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchorButton	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentAvatar	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentBadge	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton	98.4%	90.6%
Microsoft.FluentUI.AspNetCore.Components.FluentCard	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCompoundButton	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge	100%	96.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDialog	97.5%	89.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody	100%	91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider	100%	73.9%
Microsoft.FluentUI.AspNetCore.Components.FluentDivider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentErrorBoundary	96.5%	92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentField	100%	96.5%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldCondition	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionItem	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionOptions	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldParameterSelector	100%	98.7%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid	100%	90%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentHighlighter	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1	100%	95%
Microsoft.FluentUI.AspNetCore.Components.FluentImage	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1	93.8%	50%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFile	100%	93.3%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileBuffer	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileErrorEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputImmediateBase`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentJSModule	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode	100%	95.8%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs	100%	75%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeProvider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyPressEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout	100%	88.8%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutHamburger	100%	96.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutItem	100%	91%
Microsoft.FluentUI.AspNetCore.Components.FluentLink	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentListBase`1	98.4%	92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerInternal	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenu	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton	100%	71.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuItem	100%	90.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuList	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitter	100%	91.8%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterPane	100%	89.4%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterResizeEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.FluentOption	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentPopover	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgress	100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressBar	100%	95.4%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing	100%
Microsoft.FluentUI.AspNetCore.Components.FluentProviders	100%
Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1	100%	50%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioContext	100%	75%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentRatingDisplay	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceBase`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceProviderException`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSpacer	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSpinner	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSplitButton	100%
Microsoft.FluentUI.AspNetCore.Components.FluentStack	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentStatus	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSwitch	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTab	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTabs	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentText	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTextArea	100%	70%
Microsoft.FluentUI.AspNetCore.Components.FluentTextInput	100%	81.2%
Microsoft.FluentUI.AspNetCore.Components.FluentToggleButton	100%	91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltip	100%	95%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltipProvider	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem	100%	95.3%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeView	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FreeOptionOutput	100%
Microsoft.FluentUI.AspNetCore.Components.HighlighterSplitter	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Icon	100%	92.1%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage	100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo	100%
Microsoft.FluentUI.AspNetCore.Components.IFluentComponentChangeAfterKeyPres s	100%	100%
Microsoft.FluentUI.AspNetCore.Components.IFluentLocalizer	100%	100%
Microsoft.FluentUI.AspNetCore.Components.InputFileInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.InputFileOptions	100%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1	100%
Microsoft.FluentUI.AspNetCore.Components.KeyCodeService	100%	85.7%
Microsoft.FluentUI.AspNetCore.Components.KeyPress	100%
Microsoft.FluentUI.AspNetCore.Components.LayoutHamburgerEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.LibraryTooltipOptions	100%
Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource	100%	100%
Microsoft.FluentUI.AspNetCore.Components.MenuItemEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.MessageBoxOptions	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.AppearanceExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.FluentInputAppearanceExt ensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.TooltipPositionExtension	100%	100%
Microsoft.FluentUI.AspNetCore.Components.ProgressFileDetails	100%
Microsoft.FluentUI.AspNetCore.Components.ServiceProviderExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.SpacingExtensions	100%	97.2%
Microsoft.FluentUI.AspNetCore.Components.TabChangeEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.TooltipEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.TreeItemChangedEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.TreeViewItem	100%	100%
Microsoft.FluentUI.AspNetCore.Components.TreeViewItemExpandedEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.UploadedFileDetails	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.AddTag	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Identifier	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.IdentifierContext	100%	75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InternalDebounce.Dispatc herTimerExtensions	82.9%	68.7%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder	100%	100%
Microsoft.FluentUI.AspNetCore.Components.ZIndex	100%

dvoituron added 8 commits June 7, 2025 19:17

first draft

975574c

Add a new WebComponent

f874433

Update FluentPopover

311b658

Add opened property

1e5f7fe

Add new fluent-popover-b

29c69d5

Add doc

98b5e67

Add doc

4299cf8

Fix csproj

e09a342

dvoituron added 2 commits June 9, 2025 16:09

Update doc

a87bc41

Fix existing Unit Tests

9c87f6e

dvoituron added 3 commits June 10, 2025 10:02

Update the FluentPopover to use the HTML popover attribute

79da245

Add Unit Tests

d35d1d3

Remove extra console.log

a187048

dvoituron marked this pull request as ready for review June 10, 2025 08:36

dvoituron requested a review from vnbaaij as a code owner June 10, 2025 08:36

vnbaaij approved these changes Jun 10, 2025

View reviewed changes

vnbaaij merged commit 0072723 into dev-v5 Jun 10, 2025
4 checks passed

vnbaaij deleted the users/dvoituron/dev-v5/popover branch June 10, 2025 16:23

MarvinKlein1508 mentioned this pull request Sep 30, 2025

[dev-v5] TODO v5 #4182

Open

36 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[dev-v5] Popover component #3895

[dev-v5] Popover component #3895

Uh oh!

dvoituron commented Jun 9, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 9, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[dev-v5] Popover component #3895

[dev-v5] Popover component #3895

Uh oh!

Conversation

dvoituron commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[dev-v5] Popover component

Unit Tests

Uh oh!

github-actions bot commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary - Unit Tests Code Coverage

Coverage

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dvoituron commented Jun 9, 2025 •

edited

Loading

github-actions bot commented Jun 9, 2025 •

edited

Loading

github-actions bot commented Jun 9, 2025 •

edited

Loading