---
title: "Dynamic Tooltip on Custom DropDownList in ASP.Net MVC"  
description: "In this article I have described how to display dynamic tooltip on dropdownliast in ASP.Net MVC."  
author: "AVADHESH PATEL"  
published: 2013-03-05  
updated: 2020-01-27  
canonical: https://www.mindstick.com/articles/1151/dynamic-tooltip-on-custom-dropdownlist-in-asp-dot-net-mvc  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 7 minutes  

---

# Dynamic Tooltip on Custom DropDownList in ASP.Net MVC

In this article I have described how to display dynamic tooltip on dropdownliast in [ASP.Net MVC](https://www.mindstick.com/articles/1571/start-with-asp-dot-net-mvc-4).\

In MVC there is no direct method to display tooltip with @Html.[DropDownList](https://www.mindstick.com/blog/33/dropdownlist-in-asp-dot-net)() or @Html.DropDownListFor() control. In place of @Html.DropDownList() I have used HTML select tag.

Custom dropdownlist with tooltip, display as below figure:

![Dynamic Tooltip on Custom DropDownList in ASP.Net MVC](https://www.mindstick.com/mindstickarticle/30062a03-ee92-40bb-bb7e-d9be0a666855/images/d815388d-8eb3-4dd3-b1d0-f9162594be1d.png)

Steps are given below for creating custom dropdownlist with tooltip

Step 1: For bind list to dropdown first create a model and define properties with data as below

```
using System.Collections.Generic;
using System.Web.Mvc;
 
namespace MVC_DropdownWithTooltip.Models
{
    public class dropdown
    {
        private List<SelectListItem> _list = new List<SelectListItem>();
        public List<SelectListItem> country
        {
            get
            {
                _list.Add(new SelectListItem()
                {
                    Text = "India",
                    Value = "1"
                });
                _list.Add(new SelectListItem()
                {
                    Text = "USA",
                    Value = "2"
                });
                _list.Add(new SelectListItem()
                {
                    Text = "South Africa",
                    Value = "3"
                });
                _list.Add(new SelectListItem()
                {
                    Text = "Australlia",
                    Value = "4"
                });
                _list.Add(new SelectListItem()
                {
                    Text = "Japan",
                    Value = "5"
                });
                return _list;
            }
        }
    }
}
```

Step 2: Write below code for action controller

```
using System.Web.Mvc;
using MVC_DropdownWithTooltip.Models;
 
namespace MVC_DropdownWithTooltip.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View(new dropdown());
        }
    }
}
```

Step 3: Create UI part on View page as below

```
@model MVC_DropdownWithTooltip.Models.dropdown
<table>
    <tr>
        <td>
            Country
        </td>
        <td>
            <select id="ddlCountry" name="ddlCountry" style="width: 100px;">
                <option value="0" tooltipdata="Select" style="font-style: normal; font-family: Arial;">
                    Select</option>
                @foreach (var item in Model.country)
                {
                    <option value="@item.Value" tooltipdata="@item.Text" style="font-style: normal;
                font-family: Arial;">@item.Text</option>
                }
            </select>
        </td>
    </tr>
</table>
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tooltip.js")" type="text/javascript"></script>
<script src="@ Url.Content ("~/Scripts/jquery.dd.js")" type=="text/javascript"></script>
 
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        jQuery.noConflict();
        jQuery("#ddlCountry").msDropDown({ mainCSS: 'dd2', onInit: callAfterInitializationIndus });
    })
 
    function callAfterInitializationIndus() {
        jQuery("a[id*=ddlCountry]").tooltip({
            track: true,
            delay: 0,
            showURL: false,
            fade: 250,
            bodyHandler: function () {
                return jQuery("select[id*=ddlCountry] option:eq(" + this.id.substring(this.id.lastIndexOf("_") + 1) + ")").attr("tooltipdata");
            },
            showURL: false
        });
    }
</script>
```

Note: Include “jquery-1.7.1.min.js” file from solution [explorer](https://yourviews.mindstick.com/view/81617/now-it-is-time-to-say-goodbye-to-internet-explorer)’s “Script” folder.

“jquery.tooltip.js” downloads from below url

http://jquery.bassistance.de/tooltip/jquery.tooltip.js

“jquery.dd.js”download from different sources.

Step 4: Include below css for [creating custom](https://www.mindstick.com/interview/34070/creating-custom-annotations-in-java) [dropdown](https://www.mindstick.com/articles/263/ajax-toolkit-dropdownextender-in-asp-dot-net) and tooltip on view page.

```
/************** custom dropdown *********************/
.dd2
{
    /*display:inline-block !important;*/
    text-align: left;
    background-color: #e5e5e5;
    font-family: TradeGothic;
    font-style:oblique;
    font-size: 14px;
    color:#000000;
    position: relative;
}
.dd2 .ddTitle
{
    /*background:transparent url(../images/msDropDown.gif) no-repeat;*/ /*padding:0 3px;*/
    text-indent: 0;
    cursor: default;
    overflow: hidden;
    height: 25px;
    /*border: 1px solid black;*/
}
.dd2 .ddTitle span.arrow
{
    background: transparent url(../../Content/icon-arrow.gif) no-repeat 0 0;
    float: right;
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer; /*top:5px; */
    position: relative;
    /*right:2px;*/
}
 
.dd2 .ddTitle span.ddTitleText
{
    text-indent: 1px;
    overflow: hidden;
    line-height: 25px;
    margin-left: 5px;
   font-family: TradeGothic;
    font-style:oblique;
    font-size: 14px;
}
.dd2 .ddTitle span.ddTitleText img
{
    /*text-align:left;      padding:0 2px 0 0;*/
}
.dd2 .ddTitle img.selected
{
    /*padding:0 2px 0 0;*/
    vertical-align: top;
}
.dd2 .ddChild
{
    position: absolute;
    background-color:#fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    display: none;
    margin: 0;
    width: auto;
    overflow: auto;
    overflow-x: hidden !important;
    font-size: 14px;
}
.dd2 .ddChild .opta a, .dd2 .ddChild .opta a:visited
{
    padding-left: 10px;
}
.dd2 .ddChild a
{
    display: block; /*padding:3px 0 3px 3px;*/
    text-decoration: none;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    padding-left: 10px;
    padding-top:1px;
    margin-bottom:0px;
    height:25px;
    line-height:25px;
  
}
.dd2 .ddChild a:hover
{
    background-color:   #e5e5e5; 
}
.dd2 .ddChild a img
{
    border: 0;
    padding: 0 2px 0 0;
    vertical-align: middle;
}
.dd2 .borderTop
{
    border-top: 1px solid #c3c3c3 !important;
}
.dd2 .noBorderTop
{
    border-top: none 0 !important;
}
 
/*Tooltip*/
 
#tooltip {
            position: absolute;
            z-index: 999999999;
            border: 1px solid #111;
            background-color: #eee;
            padding: 5px;
            opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
```

---

Original Source: https://www.mindstick.com/articles/1151/dynamic-tooltip-on-custom-dropdownlist-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.