Dropdown inside div to show onmouseover tooltip
The following code is for onmouseover for a div, not showing the tooltip when I first move the mouse over the div element, but if I click somewhere and bring the mouse and it will display the tooltip. Not sure if I am doing something wrong? is there a way to show a tooltip for the READ ONLY dropdown inside a div?
DropDown.ascx
<div style="z-index:99;position:relative;padding:1px;" onmouseover="this.title=<%= ddl.ClientID %>.options[<%= ddl.ClientID %>.selectedIndex].text">
<asp:DropDownList ID="ddl" runat="server" CssClass="etms-dropdown-width" style="position:relative;z-index:-1;">
</asp:DropDownList>
</div>
DropDown.ascx.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
....
this.ddl.Attributes["onmouseover"] = "this.title=this.options[this.selectedIndex].text";
foreach (ListItem item in this.ddl.Items)
{
item.Attributes["title"] = item.Text;
}
this.ddl.DataBind();
}
else
{
this.ddl.Attributes["onmouseover"] = "this.title=this.options[this.selectedIndex].text";
foreach (ListItem item in this.ddl.Items)
{
item.Attributes["title"] = item.Text;
}
}
}
source to share
HTML approach
Since you want to display the title for the DropDownList for reading (for example Enabled=false
), I believe there is no reason at all to use any JavaScript and stick to plain HTML.
See the following example:
<div title="<%=DropDownList2.SelectedItem.Text %>">
<asp:DropDownList ID="DropDownList2" runat="server" Enabled="false">
<asp:ListItem Value="1" Text="Disabled item 1"></asp:ListItem>
<asp:ListItem Value="2" Text="Disabled item 2"></asp:ListItem>
<asp:ListItem Value="3" Text="Disabled item 3"></asp:ListItem>
</asp:DropDownList>
</div>
I've tested it in all browsers (Firefox 32, IE 11, Chrome 37, Opera 24) and it works without issue.
JavaScript approach
If, on the other hand, you need a JavaScript / jQuery approach, you can use the following example. In an event mouseover
on the div, the DropDownList temporarily lets you get its value and then turn it off again. After receiving the value, the attribute title
div
changes.
It is important that the div has some padding so that the cursor hovers over the div and the event will eventually fire.
HTML:
<div class="dynamictoolip" title="title">
<asp:DropDownList ID="DropDownList3" runat="server" Enabled="false">
<asp:ListItem Value="1" Text="Disabled item 1"></asp:ListItem>
<asp:ListItem Value="2" Text="Disabled item 2"></asp:ListItem>
<asp:ListItem Value="3" Text="Disabled item 3"></asp:ListItem>
</asp:DropDownList>
</div>
CSS
.dynamictoolip {
display:inline-block;
padding:4px;
}
JavaScript:
jQuery('.dynamictoolip').mouseover(function () {
var jThis = jQuery(this);
var jDdl = jThis.find('select');
var value = jDdl.find("option:selected").text();
if (jDdl.prop('disabled')) {
jDdl.removeAttr('disabled');
jDdl.attr('disabled', 'disabled');
jThis.attr('title', value);
}
else {
jThis.attr('title', value);
}
});
Note. One of the problems I noticed here is that if the user moves the cursor too quickly, the event is mouseover
not triggered. I also tried it with events mouseenter
and mouseout
(and also tried plain JavaScript and no jQuery), but it didn't make any difference.
Edit based on recent comments
Although yours <asp:DropDownList>
will be in a disabled and enabled state, the tooltip should always remain on the parent element.
The only thing we need to do is when the value <asp:DropDownList>
changes its value and also the attribute of the title
parent element changes , which can be done with a little JavaScript.
In the following shorthand code, I've added a simple link to include <asp:DropDownList>
. Also, here is a jsfiddle with code.
Html
<div>
simple ddl 2:
<span title="<%=DropDownList2.SelectedItem.Text %>">
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="ddl2" Enabled="false">
<asp:ListItem Value="1" Text="Disabled item 1"></asp:ListItem>
<asp:ListItem Value="2" Text="Disabled item 2"></asp:ListItem>
<asp:ListItem Value="3" Text="Disabled item 3"></asp:ListItem>
</asp:DropDownList>
</span>
<a href="#" class="edit_ddl2">edit</a>
</div>
JavaScript
jQuery('.edit_ddl2').click(function () {
jQuery('.ddl2').prop('disabled', false);
return false;
});
jQuery('.ddl2').change(function () {
var jThis = jQuery(this);
jThis.parent().attr('title', jThis.find("option:selected").text());
jThis.prop('disabled', true); // remove this line if you want the element to stay enabled
});
source to share
Since you need to show a tooltip for disabled controls, this may not work for some browsers. You have to control this with JS. SOURCE- Tooltip not showing for disabled html button in mozilla firefox
You can add simple javascript to set the title / tooltip when loading the document.
<body onload="SetAttr()">
Assuming parent DIV has id = dvDDL
like -<div style="z-index:99; id='dvDDL' .. />
<script>
function SetAttr() {
document.getElementById('dvDDL').setAttribute('title','<%= ddl.ClientID %>.options[<%= ddl.ClientID %>.selectedIndex].text');
}
</script>
source to share
You don't need JavaScript enabled stuff. Enough for the tooltip to appear when the user hovers over the div:
<div title="this is a tooltip"></div>
So, you need to set this value first on page load. To do this, give the div an id and set runat = server so you can access its attributes on the server:
<div runat="server" id="tooltip"></div>
Then in your code behind when the page loads, set the title attribute:
this.tooltip.Attributes["title"] = this.ddl.SelectedValue
If you are using:
AutoPostBack=true
You are done. But if you are not using AutoPostBack and you want the tooltip to change dynamically when the user changes the selected value, you need a little javascript, but put it in the onChange event in the dropdown. This way you know the dropdown will always be on when it gets called (otherwise how would they change anything). so again in your code behind, you can do something like this:
ddl.Attributes["onChange"] = "document.getElementById('" + div.ClientID "').title=this.options[this.selectedIndex].text";
source to share