Tool tip for dropdownlist



<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>





Example of Tool tip for dropdownlist


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: