Solved

ASP.NET Mouseover Popup for elements in a dropdown

Posted on 2008-10-24
3
1,283 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

Industry Leaders: 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

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
Suggested Courses

732 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