articles

Home / DeveloperSection / Articles / Dynamic Tooltip on Custom DropDownList in ASP.Net MVC

Dynamic Tooltip on Custom DropDownList in ASP.Net MVC

AVADHESH PATEL 21085 05-Mar-2013

In this article I have described how to display dynamic tooltip on dropdownliast in ASP.Net MVC.

In MVC there is no direct method to display tooltip with @Html.DropDownList() 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

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

 


Updated 27-Jan-2020
Avadhesh Kumar Patel District Project Manager - Aligarh 14 months work experience in Panchayati Raj Department Sector as District Project Manager & 12 months work experience in IT Sector as Software Engineer. :-)

Leave Comment

Comments

Liked By