Solved

ASP.NET Mouseover Popup for elements in a dropdown

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays,…
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…
As a trusted technology advisor to your customers you are likely getting the daily question of, ‘should I put this in the cloud?’ As customer demands for cloud services increases, companies will see a shift from traditional buying patterns to new…

863 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now