Blazor Kanban Board - Tooltip Template Customization
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Coming Soon - 6 items | Active - 6 items | Under Contract - 6 items | Sold - 6 items |
|---|
[6]Coming Soon PROP-101 Create and verify MLS listing for 245 Main Street. 2BR/2BA, 1,200 sq ft loft. PROP-102 Schedule professional photography for 892 Oak Avenue property listing. PROP-103 Arrange 3D virtual tour and video walkthrough for 150 Harbor View property. PROP-104 Have attorney review title and deed for 50-acre farm property in rural county. PROP-105 Order professional appraisal for 15,000 sq ft commercial office space. PROP-106 Schedule home inspection for multi-unit rental property investment opportunity. | [6]Active PROP-107 Promote weekend open house event for 245 Main Street. Brochures printed. PROP-108 Manage showings for 892 Oak Avenue. 6 appointments scheduled this week. PROP-109 Launch Instagram and Facebook campaign for waterfront condo property. PROP-110 Research zoning classification and development potential for rural farm property. PROP-111 Present office space to three potential corporate tenants. Follow-up meetings scheduled. PROP-112 Compile financials, inspections, and market analysis for investor review. | [6]Under Contract PROP-113 Received first offer on 245 Main St at 95% asking price. Awaiting seller decision. PROP-114 Home inspection complete for 892 Oak Avenue. Minor repairs noted and quoted. PROP-115 Professional appraisal valued at $425K. Aligns with asking price of $429K. PROP-116 Comp analysis shows strong agricultural market. Recommended listing price $285K. PROP-117 Legal draft lease agreement for commercial office space tenant. Awaiting review. PROP-118 Investor received mortgage pre-approval. Ready to move to contract phase. | [6]Sold PROP-119 Offer accepted at 97% asking price. Inspection and appraisal contingencies satisfied. PROP-120 Scheduled closing date: 30 days. All contingencies cleared. Ready for settlement. PROP-121 Listed at $429K. Sold at asking price after 12 days on market. Closed 9/15. PROP-122 Listed rural farm at recommended price $285K. Open house well attended. PROP-123 Lease agreement signed with corporate tenant for 5 years. Occupancy 10/1. PROP-124 Multi-unit rental property fully funded and transferred. Keys in investor hands. |
Properties
This example shows how to customize tooltips that appear when hovering over Kanban cards in the Blazor Kanban component by visualizing a Real Estate Listings. The tooltip reveals assignee, type, estimate, and summary on demand.
The Kanban component provides the following properties for tooltip customization:
- EnableTooltip – Displays default or templated tooltips based on the TooltipTemplate setting.
- TooltipTemplate – Defines custom content for card tooltips when
EnableTooltipis true.
Additional essential interactions that enhance analysis and control are also featured:
- Tooltip Template: Render a custom layout inside the tooltip using Razor templates.
- Columns: Group cards by workflow stage such as To Do, In Progress, Testing, and Done.
- Toggle Tooltip: Switch the tooltip on or off from the property panel to compare the behavior.
Key interactive features demonstrated in this sample include:
- Hover Tooltip: Hover any card to reveal a custom tooltip with detailed card information.
- Rich Content: The tooltip displays the assignee, type, estimate, and summary inside a structured layout.
- Toggle Tooltip: Use the property panel switch to turn the tooltip on or off and preview the default experience.
- Custom Styling: The tooltip uses dedicated CSS to ensure the content is well structured and easy to scan.
The Property Panel offers a quick toggle to manage the tooltip behavior:
- Enable Tooltip: Turn the templated tooltip on or off for the entire board.
- Default vs Custom: When the template is provided, the custom layout is used; otherwise the default tooltip is shown.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.