https://github.com/kristofferstrube/blazor.popper
A Blazor wrapper for the Javascript library Popper.js
https://github.com/kristofferstrube/blazor.popper
align blazor blazor-webassembly blazor-wrapper javascript popper tooltip
Last synced: about 1 year ago
JSON representation
A Blazor wrapper for the Javascript library Popper.js
- Host: GitHub
- URL: https://github.com/kristofferstrube/blazor.popper
- Owner: KristofferStrube
- License: mit
- Created: 2020-07-29T21:43:30.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-03-05T22:25:23.000Z (over 2 years ago)
- Last Synced: 2025-05-07T03:04:21.425Z (about 1 year ago)
- Topics: align, blazor, blazor-webassembly, blazor-wrapper, javascript, popper, tooltip
- Language: C#
- Homepage:
- Size: 8.4 MB
- Stars: 29
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](/LICENSE.md)
[](https://github.com/KristofferStrube/Popperize/issues)
[](https://github.com/KristofferStrube/Popperize/network/members)
[](https://github.com/KristofferStrube/Popperize/stargazers)
[](https://www.nuget.org/packages/KristofferStrube.Blazor.Popper/)
# Introduction
A Blazor wrapper for the JavaScript library Popper.js
# Demo
The sample project can be demoed at [https://kristofferstrube.github.io/Blazor.Popper/](https://kristofferstrube.github.io/Blazor.Popper/)
# Getting Started
## Prerequisites
You need to install .NET 6.0 or newer to use the library.
[Download .NET 6](https://dotnet.microsoft.com/download/dotnet/6.0)
## Installation
You can install the package via Nuget with the Package Manager in your IDE or alternatively using the command line:
```bash
dotnet add package KristofferStrube.Blazor.Popper
```
# Usage
The package can be used in Blazor WebAssembly projects.
## Assets
You first need to reference `popper.js` since this is only a wrapper. You can do this using your favorite JS package manager (e.g. `NPM` or `Library Manager`) or just add the following to the body of your `index.html` file after the point where you reference `_framework/blazor.webassembly.js`.
```html
```
## Import
You also need to reference the package in order to use it in your pages. This can be done in `_Import.razor` by adding the following.
```csharp
@using KristofferStrube.Blazor.Popper
```
## Add to service collection
An easy way to make Popper available in all your pages is by registering it in the `IServiceCollection` so that it can be dependency injected in the pages that need it. This is done in `Program.cs` by adding the following before you build the service collection.
```csharp
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#app");
// Other services are added.
builder.Services.AddScoped();
await builder.Build().RunAsync();
}
```
## Inject in page
In any page that need a popper you can then inject Popper by adding the following to the top of the razor file.
```
@inject Popper Popper;
```
Then you can use `Popper` to create a popper instance between two `ElementReference`'s like so:
```razor
reference
popper
@code {
protected ElementReference reference;
protected ElementReference popper;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Popper.CreatePopperAsync(reference, popper, new());
}
}
```
# Related articles
This repository was build on top of the work done in the following series of articles:
- [Wrapping JavaScript libraries in Blazor WebAssembly/WASM](https://blog.elmah.io/wrapping-javascript-libraries-in-blazor-webassembly-wasm/)
- [Call anonymous C# functions from JS in Blazor WASM](https://blog.elmah.io/call-anonymous-c-functions-from-js-in-blazor-wasm/)
- [Using JS Object References in Blazor WASM to wrap JS libraries](https://blog.elmah.io/using-js-object-references-in-blazor-wasm-to-wrap-js-libraries/)
- [Blazor WASM 404 error and fix for GitHub Pages](https://blog.elmah.io/blazor-wasm-404-error-and-fix-for-github-pages/)
- [How to fix Blazor WASM base path problems](https://blog.elmah.io/how-to-fix-blazor-wasm-base-path-problems/)