Search results

DropDownList options with tooltip

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

tagHelper
tooltip.cs
Countries.cs
<div class="control-wrapper">
    <div id="default" style='padding-top:75px;'>
        <ejs-dropdownlist id="Countries" dataSource="@ViewBag.data" placeholder="Select a Country" index="2" popupHeight="220px">
            <e-dropdownlist-fields value="Code" text="Name"></e-dropdownlist-fields>
        </ejs-dropdownlist>
    </div>
</div>
<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('Countries');
        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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class DropDownListController : Controller
    {
        public ActionResult tooltip()
        {
            ViewBag.data = new Countries().CountriesList();
            return View();
        }
    }
}
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;
        }
    }
}