Description:-
In this example we explain that how to Display
Dynamic Tool tip on Custom Dropdown list item in mvc4 or create Tooltip for
each item of the custom dropdownlist in asp.net with mvc.
That was the real requirement when I was worked in one project and in which the requirement is that I have an Html.DropdownList() and the select list has an item whose text is really very long, but the width of the list truncates or delete the text. I want the tooltip to show the full text so end user can easily read the item in Dropdownlist and understand properly.
So that is nice article and also usefull for you if you have long item text that you want to bind to Dropdownlist then use this example with attractive and dynamic tooltip facility in mvc application.
That was the real requirement when I was worked in one project and in which the requirement is that I have an Html.DropdownList() and the select list has an item whose text is really very long, but the width of the list truncates or delete the text. I want the tooltip to show the full text so end user can easily read the item in Dropdownlist and understand properly.
So that is nice article and also usefull for you if you have long item text that you want to bind to Dropdownlist then use this example with attractive and dynamic tooltip facility in mvc application.
to show Example of How to Display Gridview Row Detail in Javascript Popup click here Display Gridview ARow Detail in Javascript Popup
to show Example of how to Redirect to another aspx page in javascript click here Redirect to another aspx page in javascript
Follow the below step to create custom tooltip in Dropdownlist.
you have to download this two jquery like "jquery.tooltip.js" and "jquery.dd.js" add it in script folder.
you have to download this two jquery like "jquery.tooltip.js" and "jquery.dd.js" add it in script folder.
Step 1:- Create a dropdown class in model folder in your mvc application.
dropdown.cs:-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace
MvcApplication2.Models
{
public class dropdown
{
private
List<SelectListItem>
_list = new List<SelectListItem>();
public List<SelectListItem>
country
{
get
{
_list.Add(new SelectListItem()
{
Text = "Australia",
Value = "1"
});
_list.Add(new SelectListItem()
{
Text = "Pakistan",
Value = "2"
});
_list.Add(new SelectListItem()
{
Text = "India",
Value = "3"
});
_list.Add(new SelectListItem()
{
Text = "UK",
Value = "4"
});
_list.Add(new SelectListItem()
{
Text = "China",
Value = "5"
});
return
_list;
}
}
}
}
Step 2:- Create a Homecontroller class in Controller folder in your mvc application.
HomeController.cs:-
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using
MvcApplication2.Models;
namespace
MvcApplication2.Controllers
{
[HandleError]
public class HomeController
: Controller
{
public ActionResult Index()
{
return
View(new dropdown());
}
}
}
Step 3:- Create a Index view in Views folder in your mvc application.
Index.aspx:-
<%@
Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@
Import Namespace="MvcApplication2.Models" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.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;
}
</style>
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tooltip.js" type="text/javascript"></script>
<script src="../../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>
<title>Index</title>
</head>
<body>
<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>
</body>
</html>
0 comments:
Post a Comment