Solved

ASP.NET Mouseover Popup for elements in a dropdown

Posted on 2008-10-24
3
1,269 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
Comment Utility
You could just add info to Tooltip, which is a premade hover over...
0
 

Author Comment

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

Accepted Solution

by:
aninec earned 0 total points
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

763 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

11 Experts available now in Live!

Get 1:1 Help Now