How to add tooltips to ASP.NET MVC DropDownList items

25 Aug 20267 minutes to read

You can add tooltips to DropDownList items by using the ej.popups.Tooltip component. When the mouse hovers over a DropDownList item, the tooltip displays the item’s Name and Code. The Tooltip is instantiated client-side, appended to the body, and its beforeRender event is used to set the content based on the hovered list item.

@Html.EJS().DropDownList("Countries").Placeholder("Select a Country").PopupHeight("220px").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "Name", Value = "Code" }).Index(2).Render()

<script>
    var tooltip = new ej.popups.Tooltip({
        // Default content of the tooltip.
        content: 'Loading...',
        // Set the target element for the tooltip.
        target: '.e-list-item',
        // Set the position of the tooltip.
        position: 'top center',
        // Bind the beforeRender event.
        beforeRender: onBeforeRender
    });
    tooltip.appendTo('body');

    function onBeforeRender(args) {
        // Get the DropDownList instance.
        var listElement = document.getElementById('Countries');
        var result = listElement.ej2_instances[0].dataSource;
        var i;
        for (i = 0; i < result.length; i++) {
            if (result[i].Name === args.target.textContent) {
                // Show richer content (Name and Code) than the list item text.
                this.content = result[i].Name + ' (' + result[i].Code + ')';
                this.dataBind();
                break;
            }
        }
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
        public List<Countries> CountriesList()
        {
            List<Countries> country = new List<Countries>();
            country.Add(new Countries { Name = "Australia", Code = "AU" });
            country.Add(new Countries { Name = "Bermuda", Code = "BM" });
            country.Add(new Countries { Name = "Canada", Code = "CA" });
            country.Add(new Countries { Name = "Cameroon", Code = "CM" });
            country.Add(new Countries { Name = "Denmark", Code = "DK" });
            country.Add(new Countries { Name = "France", Code = "FR" });
            country.Add(new Countries { Name = "Finland", Code = "FI" });
            country.Add(new Countries { Name = "Germany", Code = "DE" });
            country.Add(new Countries { Name = "Greenland", Code = "GL" });
            country.Add(new Countries { Name = "Hong Kong", Code = "HK" });
            country.Add(new Countries { Name = "India", Code = "IN" });
            country.Add(new Countries { Name = "Italy", Code = "IT" });
            country.Add(new Countries { Name = "Japan", Code = "JP" });
            country.Add(new Countries { Name = "Mexico", Code = "MX" });
            country.Add(new Countries { Name = "Norway", Code = "NO" });
            country.Add(new Countries { Name = "Poland", Code = "PL" });
            country.Add(new Countries { Name = "Switzerland", Code = "CH" });
            country.Add(new Countries { Name = "United Kingdom", Code = "GB" });
            country.Add(new Countries { Name = "United States", Code = "US" });
            return country;
        }
    }
}