Mouseover in C# .Net

I have a page that is pulling heading from a database.  When the heading is clicked, it takes the user to another page.  I would like to do a mouseover on the headings that would popup a box with information about the heading.  Here is my code:

public partial class subflow_type : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            if (Request.QueryString["subflow"] != null)
            {
                SDU.Service_Class.DataService ds = new SDU.Service_Class.DataService(Request.ApplicationPath,
                "workflow", SDU.Service_Class.DataService.QueryType.STORED_PROC, "p_get_subflow_templates");
                ds.AddParameter("@subflowid", SDU.Service_Class.DataService.ParamType.VARCHAR,
                    Request.QueryString["subflow"]);
                if (ds.ExecuteCommand(30))
                {
                    HyperLink link;
                    Label label;
                    int top = 120;
                    foreach (DataRow row in ds.GetData.Tables[0].Rows)
                    {
                        link = new HyperLink();
                        link.Text = row["Display_Name"].ToString();
                        link.Style.Value = "z-index: 120; left: 300px; position: absolute; top: " +
                            top.ToString()
                        + "px; font-weight: normal; font-size: 12pt; color: black; font-family: Arial;";
                        link.NavigateUrl = "subflow_common.aspx?subflow_ID=" + row["Subflow_ID"].ToString()
                            + "&Display=" + row["Display_Name"].ToString() +
                            "&Type=" + row["Template_Name"].ToString();
                        Page.Form.Controls.Add(link);

                        top += 30;
                    }
                }
            }
        }
    }
}

Any and all help would be greatly appreciated.

GG Love
GiGiLoveAsked:
Who is Participating?
 
TaeSoftCommented:
Hi,

I assume that you've created the usercontrol in the same project.

The implementation is done on Form1.  
Maybe my example was a little bit low on explanations, I've added some comments.

You need to create to events on the Label1 (MouseHover and MouseLeave).

After that you can put this in the code:

Here is the code to implement it:
        // Create an instance of the usercontrol called tp.
        MyTooltip tp = new MyTooltip();

        // Show MyTooltip when mouse is over label and put appropriate text
        private void label1_MouseHover(object sender, EventArgs e)
        {
            // Add the user control to the form
            this.Controls.Add(tp);  
            // Set up the position where to put it on screen
            tp.Left = label1.Left;
            tp.Top = label1.Bottom;
            // Put some text in the usercontrol
            tp.ToolTip = "My tooltip text";
            // Make it visible on the form.
            tp.Visible = true;
        }

        private void label1_MouseLeave(object sender, EventArgs e)
        {
            // Make the usercontrol Invisible when the mouse leaves Label1.
            tp.Visible = false;
            // Dispose the control to clean up memory
            tp.Dispose();
        }

0
 
TheNigeCommented:
Try using the ToolTip property.  This will cause a temporary mouseover message to display for your control.

link.ToolTip = "My Message"
0
 
GiGiLoveAuthor Commented:
Yes, that works but I didn't think you could format tooltip text/content can you?
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
TheNigeCommented:
No, if you want it formatted then you'll have to use other methods.  Your best bet would probably be to use AJAX Toolkit Animation extender http://ajax.asp.net/ajaxtoolkit/Animation/Animation.aspx

ToolTip is the quick and easy way.
0
 
GiGiLoveAuthor Commented:
Wow, this is really cool but I'm on a tight schedule.  You make it look so easy, is it?  I assume I first have to download something.  Where do I place the code that I saw on the animation.aspx page on my page?

Thanks...
0
 
TheNigeCommented:
You'll need to first download the AJAX framework from ajax.asp.net.  You'll then need to download the AJAX Toolkit also from the same site.  It is reletively easy to implement by just adding the references to your project and Visual Studio toolbox.  Sorry but it is too much to explain here though.

Go with the Tooltip if you are on a tight schedule and don't need it formatted.
0
 
TaeSoftCommented:
Can you popup a self made usercontrol with this text.
Dispose it when you the mouse isn't over the header anymore.
0
 
GiGiLoveAuthor Commented:
I'm not familiar with self made usercontrols.
0
 
GiGiLoveAuthor Commented:
Hi TheNige,

I went to the AJAX site and tired following the steps for tooltip popups to get familiar with it but ran into this error message that I haven't figured out yet:

Server Error in '/AJAXTooltip' Application.
--------------------------------------------------------------------------------

Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0103: The name 'ConfigurationManager' does not exist in the current context

Source Error:

Line 22: public string GetToolTipText(int menuid)
Line 23: {
Line 24: string strConn = ConfigurationManager.ConnectionStrings
Line 25: ["connstr"].ConnectionString;
Line 26: SqlConnection cnn = new SqlConnection(strConn);

Source File: c:\AJAXTooltip\App_Code\WebService.cs    Line: 24
0
 
GiGiLoveAuthor Commented:
I just created a usercontrol, I think, but I don't know how to use it:

namespace ContainerUserControl
{
    partial class UserControl1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Component Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.components = new System.ComponentModel.Container();
            this.toolTip1 = new System.Windows.Forms.ToolTip(this.components);
            this.SuspendLayout();
            //
            // UserControl1
            //
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.Name = "UserControl1";
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.ToolTip toolTip1;
    }
}
0
 
TaeSoftCommented:
Hello GiGiLove,

You can see a usercontrol like a form (it is not exactly the same but...)

You can try this to learn.

STEP 1:
- Create a usercontrol and call it MyToolTip
- put the background to light yellow to demonstrate it better.
- add a label and call it lblTooltip
- go to the code of the usercontrol and put this:
       public partial class MyTooltip : UserControl
    {
        public MyTooltip()
        {
            InitializeComponent();
        }
        private string sToolTip;
        public string ToolTip
        {
            get
            {
                return this.sToolTip;
            }
            set
            {
                this.sToolTip = value;
                lblTooltip.Text = value;
            }
        }
    }

// I've used get and set to put information to the label.

STEP 2:

I've created a simple form Form1 with a label Label1 that should act as your header (replace the label by you header or grid later).  We will use MouseHover and MouseLeave on the Label1.

See here code behind Form1:

        public Form1()
        {
            InitializeComponent();
        }
       
        MyTooltip tp = new MyTooltip();
        private void label1_MouseHover(object sender, EventArgs e)
        {
            // Show MyTooltip when mouse is over label and put appropriate text
            this.Controls.Add(tp);
            tp.Left = label1.Left;
            tp.Top = label1.Bottom;
            tp.ToolTip = "My tooltip text";
            tp.Visible = true;
        }

        private void label1_MouseLeave(object sender, EventArgs e)
        {
            // Make MyToolTip Invisible when the mouse leaves Label1.
            tp.Visible = false;
        }

As you can see I've defined a public MyToolTip that will be used as tooltip.

You can extent this usercontrol to all your wishes (f.e. maybe you want to show a picture)

I hope it helps,
TaeSoft

0
 
TaeSoftCommented:
Sorry forgot 1 line in the MouseLeave - part.

        private void label1_MouseLeave(object sender, EventArgs e)
        {
            // Make MyToolTip Invisible when the mouse leaves Label1.
            tp.Visible = false;

        }
0
 
TaeSoftCommented:
'Accidently submit', and forgot to put Dispose() for memory sake.

        private void label1_MouseLeave(object sender, EventArgs e)
        {
            // Make MyToolTip Invisible when the mouse leaves Label1.
            tp.Visible = false;
            tp.Dispose();
        }
0
 
GiGiLoveAuthor Commented:
Got it down on how to create a usercontrol, now how do I implement it.

Thanks...
0
 
TaeSoftCommented:
Hi GiGi,

have you found a solution yet?

TaeSoft
0
 
TaeSoftCommented:
It is just because of the Belgium Time frame
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.