Simple ToolTip Service for Blazor Applications
This repository is in no way an opiniated implementation. This is a learning project. Any comment/critic is welcome.
Inspired by Chris Sainty's article on creating basic ToolTips
Simplicity: As much as I’d like to make an insane, feature-rich component, as this is a learning project, so I’ll limit the scope to basic functionalities at first, while keeping in mind possible future features additions.
Reusability: We want to make a tool that is reusable across different projects and allow the users to customize the toggler, the anchors, and the helpers as much as possible.
- Register ToolTip Service in your Start-up file
// In your file Startup.cs (server)/ Program.cs (Wasm)
...
services.AddBlazorToolTips();
...- Add Css Stylesheet and JS to the _host.cshtml (server) / Index.razor (wasm)
...
<!-- in your page <head> -->
<link src="_content/Blazor.ToolTips/style.css" ref="stylesheet" />
...
<!-- before </body> -->
<script src="_content/ToolTips/ToolTipsJS.js"></script>- Add one ToolTip Toggler somewhere accessible and visible - (having more togglers won't cause a problem, but they will all act the same)
// In any accessible component or DOM element (header, footer...)
...
<ToolTipToggler />
...- Add anchors anywhere on your site
// In any accessible component or DOM element (header, footer...)
...
<ToolTipAnchor>
But What is it?
<Helper>
Isn't it a nice information!
</Helper>
</ToolTipAnchor>
...- Implement State Container - Working
- Notification to the Components
- Dependency Injection
- Adding options to customize the State Container (?)
- Implement Toggler Component - Working
- Blazor Component with minimal styling
- Implement Anchor Component - Working
- Blazor Component with minimal styling
- Javascript Background helpers
- Added Helper position relative to the Anchor position
- Add handling Anchors loaded as Markup strings
- Add file fetching for helper texts (json/resx...)
- Add Tutorial Display
- Implement unit tests