Option to render field hints as tooltips

[Klabos]

Hi,

we recently reviewed the UX of the CMS administration with our design team. We identified that the current method of displaying field hints (as static text below the input field) can sometimes clutter the UI or be overlooked. We believe that offering an alternative visualization would improve the user experience.

I propose adding an option to render hints as a question mark icon with a tooltip, rather than the standard text block.

I have already created a quick proof of concept internally. Since OrchardCore already utilizes Bootstrap and FontAwesome, this enhancement requires no new external dependencies or major architectural changes. It only involves updating the specific Field Views.

Proof of Concept
Here is an example of the implementation in TextField.Edit.cshtml (the original hint rendering is commented out):

<div>
    <label asp-for="Text" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
    @if (!string.IsNullOrEmpty(settings.Hint))
    {
        @* <span class="hint dashed">@settings.Hint</span> *@
        <button class="btn btn-link btn-hint"
                type="button"
                data-bs-toggle="tooltip"
                data-bs-delay='{"show":200,"hide":50}'
                data-bs-placement="top"
                data-bs-title='@settings.Hint'>
            <i class="fa-regular fa-circle-question"></i>
        </button>
    }
</div>

Implementation Details
To make this flexible, I suggest adding a configuration setting (e.g., a checkbox in the Field definition settings) that allows the administrator to choose between the "Original Hint" (text below) and the "Tooltip Hint" (icon).

Contribution
I am willing to implement this feature and submit a PR. I believe this offers significant UX value with minimal impact on the codebase.

[github-actions]

Thank you for submitting your first issue, awesome! 🚀 We're thrilled to receive your input. If you haven't completed the template yet, please take a moment to do so. This ensures that we fully understand your feature request or bug report. On what happens next, see the docs.

If you like Orchard Core, please star our repo and join our community channels.

[sebastienros]

I suggest to create Hint shape so we can have a Hint.Admin.cshtml template in the admin template. This template will default to <span class="hint dashed">@settings.Hint</span>. We then replace all the places where we inject the hint with this shape -> New.Hint_Admin(settings.Hint)

Then in your custom admin theme you could decide to render a button tag instead.

[github-actions]

We triaged this issue and set the milestone according to the priority we think is appropriate (see the docs on how we triage and prioritize issues).

This indicates when the core team may start working on it. However, if you'd like to contribute, we'd warmly welcome you to do that anytime. See our guide on contributions here.

[hishamco]

@Klabos, do you want to start a PR for this?

[Klabos]

I really like the idea of extracting this into a Hint shape.

However, I still see a significant benefit in having the tooltip vs. standard text as a configurable option, rather than relying solely on overriding the shape globally in a custom admin theme.

What if we introduced two shapes—something like Hint.Admin.cshtml and TooltipHint.Admin.cshtml—and tied them to a field configuration setting? This would preserve the flexibility and give administrators the choice of how to render the hint per field.

Regardless of the direction we ultimately choose (custom theme override vs. built-in toggle), I am definitely still interested in implementing this and submitting a PR.