Proposal: Blazored/Popover Repository

[taylorchasewhite]

Background

Here's an example of consuming the Blazored/Modal repository (package? component?, not sure the right noun here). The user clicks on the "add call button":

and the Blazored modal component appears:

You can see I've removed the backdrop/overlay to make it feel more "lightweight".

Popover Proposal

The proposal for a "popover" component is to effectively take the Modal implementation and take elements of a "popover" component, very similar to what is described on Bootstrap 4's page.

Difference from Blazored/Modal

The main UI differences:

• A triangle next to the launching component
• No shaded background (the overlay that appears will be transparent).

The impression is that this effectively is lighterweight than a modal popup, and consumers may choose to show it on a hover (though they don't need to).

Features

Planned

Little Triangle outputting from the Parent component

.

"Direction" Property to choose "preferred" direction of the popover.

Property Popover.PreferredDirection or Popover.Direction to tell the Popover where to attempt to position on the screen. It will not always be respected if not possible.

Possible/Considered/Future?

Some kind of baked in Hover functionality

I'm not exactly sure how this would work, but something like this:

<PopoverContainer OnHover="ShowPopover">
    <div class="card">Hover over me for more info!</div>
  </PopoverContainer>

@code {
	private async Task ShowPopover(MouseEventArgs eventArgs)
	{
		PopoverParameters parameters = new PopoverParameters ();
		PopoverOptions options = new PopoverOptions();

		// ... Add Params

		options.Class = "...Additional Classes...";
		options.Animation = PopoverAnimation.FadeIn(.25); // A quarter second

		var formModal = Popover.Show<CommunicationEventForm>("Add New Communication", parameters,options);
		var result = await formModal.Result;

		if (result.Cancelled)
		{
			Console.WriteLine("Popover was cancelled");
		}
		else
		{
			SaveCommunication();
		}
	}
}

The main addition here is a wrapper component that handles showing/cancelling the popover. If you hover over the ChildContent in the wrapper container, it would trigger showing the popover. If you then move the mouse over the popover from the ChildContent, it would remain displayed, but if you left both the ChildContent and the Popover, the Popover would disappear.

I'm not totally convinced this is worth the effort though since generally people aren't huge fans of "hover to discover", so maybe sit on this piece for a bit.

[chrissainty]

Thanks for the proposal Taylor. I want to understand exactly what we're aiming for if we went ahead with this package.

Popovers as per the Bootstrap example you linked to, are as you mentioned, very lightweight. Things like help text or additional information, maybe light functionality such as an approve button. In the screenshots you included I don't feel that is what most people would consider a popover, that was very much a modal. Could you clarify what your thoughts are on this?

[taylorchasewhite]

Fair question--my example was probably not the best one for a popover.

I am thinking of a "lightweight" "traditional" popover, like what you see on Wikipedia when you hover over links. Consumers could choose to do something like what I mocked up up above, but like you said that seems like a much larger, much more "modal"-esque type of control above rather than the more classic uses of popovers below.

Presumably the consumer would just pass ChildContent into the Popover, so anything could be rendered, and thus you could have interactive components inside the popover like Wikipedia does.

[chrissainty]

This is exactly the sort of thing I was thinking as well. I agree with the approach you mention, passing ChildContent would give the maximum flexibility. Do you have an idea of how you will have the content render? I think this would require some JS interop?