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:
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; }
Leave Comment