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

Dynamic Tooltip on Custom DropDownList in ASP.Net MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 10783  View(s)
Rate this:

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.

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’sScript” 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; }

 


Don't want to miss updates? Please click the below button!

Follow MindStick