starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

[PR #2241] feat: Add tooltip functionality to RadzenFormField #3151

New Issue
Closed
opened 2026-01-29 18:22:09 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:22:09 +00:00
Owner
Copy Link

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/2241

State: closed
Merged: No

Description:

This pull request introduces a new feature to the RadzenFormField component, allowing developers to easily add a tooltip with contextual information next to the field's label. This enhancement aims to improve the user experience by providing inline help without consuming additional screen space.

Changes Implemented:

  • New Parameter: A public parameter InfoText of type string has been added to the RadzenFormField component.
  • Conditional Rendering: A RadzenIcon with the help icon is now rendered inside the <label> tag, positioned next to the field's text, only when the InfoText parameter is not null or empty.
  • Tooltip Integration: The TooltipService is injected into the component. The icon's onmouseenter event is configured to open a tooltip using the value of InfoText.
  • Correct Positioning: The icon is placed within the <label> element to ensure it aligns correctly with the field's label text.

Why These Changes Are Valuable:

This feature provides a simple and clean way to add interactive, informative tooltips to form fields. It helps reduce cognitive load for users and makes forms more intuitive to fill out.

How to Test:

  1. Use the RadzenFormField component in your application.
  2. Set the InfoText parameter to a string value (e.g., InfoText="This field requires a valid email address.").
  3. Run the application and hover over the help icon that appears next to the label.
  4. Verify that a tooltip containing the InfoText value is displayed correctly.
  5. Confirm that the icon is properly aligned with the label text.
image
**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/2241 **State:** closed **Merged:** No --- **Description:** This pull request introduces a new feature to the `RadzenFormField` component, allowing developers to easily add a tooltip with contextual information next to the field's label. This enhancement aims to improve the user experience by providing inline help without consuming additional screen space. **Changes Implemented:** * **New Parameter:** A public parameter `InfoText` of type `string` has been added to the `RadzenFormField` component. * **Conditional Rendering:** A `RadzenIcon` with the `help` icon is now rendered inside the `<label>` tag, positioned next to the field's text, only when the `InfoText` parameter is not null or empty. * **Tooltip Integration:** The `TooltipService` is injected into the component. The icon's `onmouseenter` event is configured to open a tooltip using the value of `InfoText`. * **Correct Positioning:** The icon is placed within the `<label>` element to ensure it aligns correctly with the field's label text. **Why These Changes Are Valuable:** This feature provides a simple and clean way to add interactive, informative tooltips to form fields. It helps reduce cognitive load for users and makes forms more intuitive to fill out. **How to Test:** 1. Use the `RadzenFormField` component in your application. 2. Set the `InfoText` parameter to a string value (e.g., `InfoText="This field requires a valid email address."`). 3. Run the application and hover over the `help` icon that appears next to the label. 4. Verify that a tooltip containing the `InfoText` value is displayed correctly. 5. Confirm that the icon is properly aligned with the label text. <img width="1224" height="606" alt="image" src="https://github.com/user-attachments/assets/a54c8897-d1f5-4df8-b58b-6b6609acecf7" />
claunia added the pull-request label 2026-01-29 18:22:09 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#3151
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?