Have Description of Enum show as a tooltip in Razor page

Question

I'm trying to have a tooltip show up in a dropdown consisting of enum values in a Razor page in a MVC application(see screenshot below). I see other posts referring to using the Title attribute so I tried to use it here in my Razor page, but the tooltip does not show up at all.

<div class="col-sm-8">
    <div class="input-group">
        @Html.DropDownListCustomFor(m => m.Charge.CreditSubType, Model.CreditSubTypeSelector, new { @class = "form-control", title=Model.Charge.CreditSubType.Description()})
    </div>
    @Html.ValidationMessageFor(m => m.Charge.CreditSubType)
</div>

Here is a snippet of my enum class with Description set:

  public enum CreditTypeSubFilter
    {
        [Display(Name = "SLA Miss", Description = "dfd")] SLAMiss = 1,

The definition for the DropDownListCustomFor is here in this MvcHtmlHelpers.cs:

public static MvcHtmlString DropDownListCustomFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, object htmlAttributes, string emptyValueLabel = null)
    {
        var selected = htmlHelper.ValueFor(expression).ToString();
        var items = new List<SelectListItem>();
        if (emptyValueLabel != null)
        {
            items.Add(new SelectListItem
            {
                Disabled = false,
                Value = string.Empty,
                Text = emptyValueLabel,
                Selected = string.IsNullOrEmpty(selected)
            });
        }
        items.AddRange(selectList);
        var dropDownList = new DropDownList
        {
            Items = items,
            Selected = selected,
            InputId = htmlHelper.IdFor(expression).ToString(),
            InputName = htmlHelper.NameFor(expression).ToString()
        };
        var selectedItem = items.SingleOrDefault(i => i.Value == dropDownList.Selected);
        dropDownList.SelectedLabel = selectedItem != null ? selectedItem.Text : string.Empty;
        var viewData = GetViewDataForHtmlAttributes(htmlAttributes);
        return htmlHelper.Partial("DropDownList", dropDownList, viewData);
    }

And in the controller, here is how the values are generated:

 chargeEditor.CreditSubTypeSelector = DropDownListHelper.SelectList(_chargeRepository.GetCreditSubReasons((CreditTypeFilter)chargeEditor.Charge.CreditType), chargeEditor.Charge.CreditSubType);

When looking at Developer tools in the browser, here is a snippet of the HTML that is generated. As you can see the description does not show up at all:

<li class="Charge_CreditSubTypeitem"><a href="javascript:dropDownSetValue('Charge_CreditSubType','Charge_CreditSubType_name','ErroneousPhysicalPackageStorageCharges','Erroneous Physical Package Storage Charges','')">Erroneous Physical Package Storage Charges</a></li>

Thanks in advance for your help.

Edit: I also tried this by just adding "hello" to title but the "hello" does not show at all as a tooltip.

 @Html.DropDownListCustomFor(m => m.Charge.CreditSubType, Model.CreditSubTypeSelector, new { @class = "form-control", title ="hello"})

Answer 1

I'm trying to have a tooltip show up in a dropdown consisting of enum values in a Razor page in a MVC application(see screenshot below). I see other posts referring to using the Title attribute so I tried to use it here in my Razor page, but the tooltip does not show up at all.

Well, first of all, I cannot see your screenshot, apart from this, you cannot display directly a enum or list or any type of collection within HTML title attribute. If you look at the defination of title attribute its a type of string. So you can display string within it.

In addition to this, I have tired with your code snippet, and its working as expected. I am getting the tooltip while hovering the mouse over it. As you can see below:

<div class="col-sm-8">
    <div class="input-group">
       @Html.DropDownList("Location", Model.selectListItems, null, new { @class = "form-control",  title= "This is my tooltip which is HTML title atrribute a type of string and cannot display array or collection" })
    </div>
</div>

Furthermore, if you want to display collection or enum or dropdown value within your tooltip or title, then you have to parse the collection or list as comma seperated string. You can have a look following steps:

Dropdown value as tooltip or Title:

Let's say, I have below razor model class:

public class LocationSelectListDisableTextboxModel : PageModel
    {
        public static List<SelectListItem> GetAll()
        {
            return new List<SelectListItem>
            {
                new SelectListItem() { Value = "0", Text = "Please Select Value" },
                new SelectListItem() { Value = "1", Text = "Location-A" },
                new SelectListItem() { Value = "2", Text = "Location-B" },
                new SelectListItem() { Value = "3", Text = "Location-C" },
                new SelectListItem() { Value = "4", Text = "Disable Textbox" }

            };
        }

        public List<SelectListItem> selectListItems = new List<SelectListItem>();
        public void OnGet()
        {
            selectListItems = GetAll();

        }
    }

Note: I want to display all the dropdown value as title or tooltip.

Razor View:

@page
@model RazorPageDemoApp.Pages.LocationSelectListDisableTextboxModel
@{
}



Location DropDown: @Html.DropDownList("Location", Model.selectListItems, null, new { @class = "form-control",  title= string.Join(", ", Model.selectListItems.Select(x => x.Text)) })

Output: