Solved

ASP.NET Mouseover Popup for elements in a dropdown

Posted on 2008-10-24
3
1,288 Views
Last Modified: 2012-06-27
I am using Expression Web with VB.  I have an .aspx page.  I have databound dropdown box.  I want to show the user a popup box when they mouseover each element in the dropdown.  This popup will contain information on what that particular element means.  I do not need the popup info in a database - I can write it in the coding.

I am not using AJAX and I am not using a code behind page.  I want to use javascript for the coding.

Exampels of the coding that I need would be greatly appreciated.
0
Comment
Question by:aninec
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 21

Expert Comment

by:silemone
ID: 22797355
You could just add info to Tooltip, which is a premade hover over...
0
 

Author Comment

by:aninec
ID: 22797393
How do I add different  comments for each element in the dropdown?
0
 

Accepted Solution

by:
aninec earned 0 total points
ID: 22798543
From what I can find out on the google - tooltips does not work on a databound asp dropdown.

I found a solution using Javascript - which is what I requested..  
Found on: http://forums.asp.net/t/903935.aspx

<form id="Form1" method="post" runat="server">
 <asp:DropDownList id="DropDownList1" onmouseover="showDropDownToolTip(this);" onmouseout="hideDropDownToolTip();" runat="server">
  <asp:listitem value="">Select One</asp:listitem>
  <asp:listitem value="Images/Image1.gif">Image1</asp:listitem>
  <asp:listitem value="Images/Image2.gif">Image2</asp:listitem>
  <asp:listitem value="Images/Image3.gif">Image3</asp:listitem>
 </asp:DropDownList>

 <div id="divDropDownToolTip" style="position:absolute;display:none;background:lightyellow;border:1px solid gray;padding:2px;font-size:8pt;font-family:Verdana;" onMouseOut="hideDropDownToolTip()">
  <img id="informationImage" src="" border="0"/>
  <span id="informationText"></span>
 </div>
</form>

<script type="text/javascript">
<!--
function showDropDownToolTip(elementRef)
{
 if ( elementRef.options[elementRef.selectedIndex].value == '' )
  return;

 // Set to some new image...
 var imageRef = document.getElementById('informationImage');
 imageRef.src = elementRef.options[elementRef.selectedIndex].value;

 // Set to information text...
 var informationSpanRef = document.getElementById('informationText');
 informationSpanRef.innerHTML = elementRef.options[elementRef.selectedIndex].text;

 var toolTipRef = document.getElementById('divDropDownToolTip');
 toolTipRef.style.top = window.event.clientY + 20;
 toolTipRef.style.left = window.event.clientX;
 toolTipRef.style.display = 'block';
}

function hideDropDownToolTip()
{
 document.getElementById('divDropDownToolTip').style.display = 'none';
}
// -->
</script>
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
If you're a developer or IT admin, you’re probably tasked with managing multiple websites, servers, applications, and levels of security on a daily basis. While this can be extremely time consuming, it can also be frustrating when systems aren't wor…
Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question