Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
I want to make a label visible when the mouse is over atextbox and invisible the label on mouse out of the text box. How can I do it?

Thank you
Posted

Try this
function LabelShow() {
var element = document.getElementById('<%=lbl.ClientID %>');
element.style.display = 'block';
}
function LabelHide() {
var element = document.getElementById('<%=lbl.ClientID %>');
element.style.display = 'none';
}

<asp:textbox id="txt" runat="server" onmouseover="LabelShow();" onmouseout="LabelHide();" xmlns:asp="#unknown"></asp:textbox>
<asp:label id="lbl" runat="server" text="text" xmlns:asp="#unknown">
</asp:label>
 
Share this answer
 
Comments
Rahul Rajat Singh 28-Jun-12 7:06am    
+5 for trying out and then posting the answer.
pradiprenushe 28-Jun-12 7:21am    
Thanks
Please check the following code:

XML
<script language="javascript" type="text/javascript">
    function onover()
    {
       // alert("over");
        document.getElementById('<%=Label1.ClientID%>').style.display="inline";
    }
    function onout()
    {
        //alert("out");
        document.getElementById('<%=Label1.ClientID%>').style.display="none";
    }

    </script>


XML
<form id="form1" runat="server">
           <asp:Label ID="Label1" runat="server" Text="show"></asp:Label>
           <asp:TextBox ID="TextBox1" runat="server" onmouseover="javascript:onover();" onmouseout="javascript:onout();"></asp:TextBox>
   </form>



Working perfectly as per your requirement.

Please check and let me know.

mark it solution if you got your answer, so that other can refer the solution.

Thanks
Ashish
 
Share this answer
 
v2
Comments
Rahul Rajat Singh 28-Jun-12 7:06am    
+5 for trying out and then posting the answer.
AshishChaudha 28-Jun-12 7:09am    
Thnx rahul
Tried to implement it and it seems to be working. here is the aspx markup for this:

XML
<asp:TextBox ID="TextBox1" runat="server" onfocus="showLabel()" onblur="hidelabel()"
                onmouseover="showLabel()" onmouseout="hidelabel()">

            </asp:TextBox>
            <asp:Label ID="Label1" runat="server" Text="Label" Style="visibility: hidden;"></asp:Label>



and here is the JS function

JavaScript
function showLabel()
    {
        document.getElementById('Label1').style.visibility = "Visible";
    }

    function hidelabel()
    {
        document.getElementById('Label1').style.visibility = "hidden";
    }
 
Share this answer
 
Comments
Zukiari 28-Jun-12 7:45am    
Thank you
Rahul Rajat Singh 28-Jun-12 7:46am    
you are most welcome. always happy to help fellow developers.
You have to use the Javascript onMouseOver and onMouseOut events for it.
ASP.NET
<asp:textbox id="TextBox1" runat="server" onmouseover="showLabel()" onmouseout="hideLabel()" xmlns:asp="#unknown"></asp:textbox>


In the showLabel method display the label and in the hideLabel() method you can hide the label.
You can use the document.getElementById method to get the instance of the label object.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900