DropDownList options with tooltip

12 Apr 20226 minutes to read

You can achieve this behavior by using ej2-tooltip component. When the mouse hovers on the DropDownList option, the tooltip displays some details related to hovered list item.

CSHTML

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

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

    function onBeforeRender(args) {
        // get the target element
        var listElement = document.getElementById('country');
        var result = listElement.ej2_instances[0].dataSource;
        var i;
        for (i = 0; i < result.length; i++) {
            if (result[i].Name === args.target.textContent) {
                this.content = result[i].Name;
                this.dataBind();
                break;
            }
        }
    }
</script>

Countries.cs

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;
        }
    }
}