Skip to content

Commit 1197ca5

Browse files
authored
docs(popover): Improve Popover Overview examples (#2337)
* docs(popover): Improve basic Popover example * Update @ref example * Improve basic steps
1 parent 3631a47 commit 1197ca5

File tree

1 file changed

+28
-15
lines changed

1 file changed

+28
-15
lines changed

components/popover/overview.md

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,36 @@ The <a href = "https://www.telerik.com/blazor-ui/popover" target="_blank">Blazor
1515
## Creating Blazor Popover
1616

1717
1. Add the `<TelerikPopover>` tag to a Razor file.
18-
1. Obtain a `@ref` of the component.
18+
1. Set the `AnchorSelector` parameter to a CSS selector, which points to the HTML element that the Popover will align with.
19+
1. Configure how the app will show and hide the Popover component. Use one or both options below:
20+
* Set the `ShowOn` parameter to an `PopoverShowOn` enum value to set which user interaction with the anchor will display the Popover automatically.
21+
* [Obtain the component reference with the `@ref` attribute](#popover-reference-and-methods) to show and hide the Popover programmatically.
1922
1. Add the content to the `<PopoverContent>` child tag.
20-
1. Use the [`Show`](#popover-reference-and-methods) method to display the `<TelerikPopover>`.
21-
1. (optional) Add a title inside a `<PopoverHeader>` tag. HTML markup and child components are supported, too.
23+
1. (optional) Configure the Popover `Position` and `Offset`, or add a title inside the `<PopoverHeader>` tag.
2224

23-
>caption Basic configuration of the Telerik Popover for Blazor
25+
>caption Basic Telerik Popover for Blazor
2426
2527
````CSHTML
2628
<TelerikPopover @ref="@PopoverRef"
27-
AnchorSelector=".popover-target">
29+
AnchorSelector=".popover-target"
30+
ShowOn="@PopoverShowOn.Click"
31+
Position="@PopoverPosition.Bottom"
32+
Offset="20">
2833
<PopoverContent>
29-
I am a Telerik Popover
34+
Telerik Popover for Blazor
3035
</PopoverContent>
3136
<PopoverActions>
32-
<TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
37+
<TelerikButton OnClick="@( () => PopoverRef?.Hide() )"
38+
Icon="@SvgIcon.X">Close</TelerikButton>
3339
</PopoverActions>
3440
</TelerikPopover>
3541
36-
<TelerikButton OnClick="@(() => PopoverRef.Show())" Class="popover-target">Show the Popover</TelerikButton>
42+
<TelerikButton Class="popover-target">Show Popover Automatically</TelerikButton>
43+
44+
<TelerikButton OnClick="@( () => PopoverRef?.Show() )">Show Popover Programmatically</TelerikButton>
3745
3846
@code{
39-
private TelerikPopover PopoverRef { get; set; }
47+
private TelerikPopover? PopoverRef { get; set; }
4048
}
4149
````
4250

@@ -64,7 +72,7 @@ The Blazor Popover provides parameters to configure the component. Also check th
6472
| `Offset` | `double ` | The space between the Popover and its anchor in pixels. |
6573
| `Position` | `PopoverPosition ` enum <br /> (`Top`) | The position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) |
6674
| `ShowCallout` | `bool` <br /> (`true`) | Defines if the callout is rendered. |
67-
| `ShowOn` | `PopOverShowOn?` enum <br /> (`null`) | The browser event that will display the Popover (`MouseEnter` or `Click`). When you set the `ShowOn` parameter to `Click`, the Popover will hide when the user clicks outside the component. If the parameter's value is `MouseEnter`, the Popover will hide when the mouse pointer leaves. |
75+
| `ShowOn` | `PopOverShowOn?` enum <br /> (`null`) | The browser event that will display the Popover (`MouseEnter` or `Click`) without the need to [use component methods](#popover-reference-and-methods). When you set the `ShowOn` parameter to `Click`, the Popover will hide when the user clicks outside the component. If the parameter value is `MouseEnter`, the Popover will hide when the mouse pointer leaves. |
6876

6977
### Styling and Appearance
7078

@@ -88,19 +96,24 @@ To execute Popover methods, obtain a reference to the component instance with `@
8896

8997
````CSHTML
9098
<TelerikPopover @ref="@PopoverRef"
91-
AnchorSelector=".popover-target">
99+
AnchorSelector=".popover-target"
100+
Position="@PopoverPosition.Bottom"
101+
Offset="20">
92102
<PopoverContent>
93-
I am a Telerik Popover
103+
Telerik Popover for Blazor
94104
</PopoverContent>
95105
<PopoverActions>
96-
<TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
106+
<TelerikButton OnClick="@( () => PopoverRef?.Hide() )"
107+
Icon="@SvgIcon.X">Hide</TelerikButton>
97108
</PopoverActions>
98109
</TelerikPopover>
99110
100-
<TelerikButton OnClick="@(() => PopoverRef.Show())" Class="popover-target">Show the Popover</TelerikButton>
111+
<TelerikButton OnClick="@( () => PopoverRef?.Show() )">Show Popover</TelerikButton>
112+
113+
<TelerikSvgIcon Class="popover-target" Icon="@SvgIcon.QuestionCircle" />
101114
102115
@code{
103-
private TelerikPopover PopoverRef { get; set; }
116+
private TelerikPopover? PopoverRef { get; set; }
104117
}
105118
````
106119

0 commit comments

Comments
 (0)