Show image in tooltip of datagridview

Question

Background: I am working with winforms in c#. I do not want images to be shown in datagridview cells, i have stored only path in database and showing them in datagridview from database.

Problem: When user enters a cell a tooltip is poped-up. What I need is that when column index of current-cell is 2 then the tool tip should show an image from the path given in the current cell.

I have found This Article very good. But unable to get succeeded. I have following code

    void CustomizedToolTip_Popup(object sender, PopupEventArgs e)
    {
        DataGridView parent = e.AssociatedControl as DataGridView;
        if (parent.CurrentCell != null)
        {
            if (parent.CurrentCell.ColumnIndex == 2)
            {
                Bitmap bmpIn = new Bitmap(parent.CurrentCell.Value + "");
                using (Graphics g = Graphics.FromImage(bmpIn))
                {
                    Rectangle mr = new Rectangle(5, 5, 50, 50);
                    mr.Location = new Point(5, 5);
                    g.PageUnit = GraphicsUnit.Pixel;
                    g.DrawImage(bmpIn, mr);
                }
            }
        }
    }

I thought this code should draw image, but it is not drawing, and more than drawing I am uncertain about the location, even If I could draw, how to locate it in tootip. I have not been able to understand it from the article i mentioned. Below is the image of my datagridview.

Answer 1

I did something similar for a project.

Instead, I just used a form which I set to open on CellMouseOver, close on CellMouseLeave

    frm_MouseOverPicture HoverZoom = new frm_MouseOverPicture();

    private void dgv_CellMouseEnter(object sender, DataGridViewCellEventArgs e)
    {
       DataGridView dgv_sender = sender as DataGridView;
       DataGridViewCell dgv_MouseOverCell = dgv_sender.Rows[e.RowIndex].Cells[e.ColumnIndex];

       //Get FilePath from dgv_MouseOverCell content

       //Get x, y based on position relative to edge of screen
       //x, y = top left point of HoverZoom form

       HoverZoom.LoadPicture(FilePath);
       HoverZoom.Location = new System.Drawing.Point(x, y);
       HoverZoom.Show();

    }

    private void dgv_CellMouseLeave(object sender, DataGridViewCellEventArgs e)
    {
       HoverZoom.Hide();
       HoverZoom.ClearPicture();
    }

Hope that is close enough to what you are looking for. I just made the form with no border and put a picture box over the whole thing.

Answer 2

Just add a picturebox to your form and set size mode to "StretchImage" and visible= false, then add the following events to your datagridview

       private void metroGrid1_CellMouseEnter(object sender, DataGridViewCellEventArgs e)
    {
        DataGridView dgv_sender = sender as DataGridView;
        DataGridViewCell dgv_MouseOverCell=null;
        if (e.RowIndex > 0 && e.ColumnIndex > 0 && e.RowIndex <dgv_sender.RowCount && e.ColumnIndex<dgv_sender.ColumnCount)
        {
          dgv_MouseOverCell = dgv_sender.Rows[e.RowIndex].Cells[e.ColumnIndex];
        }
        if(dgv_MouseOverCell !=null)
        if (e.ColumnIndex == 4) {
            if (dgv_MouseOverCell.Value != null)
            {
                if (File.Exists(dgv_MouseOverCell.Value.ToString()))
                {
                    Image img = Image.FromFile(dgv_MouseOverCell.Value.ToString());
                    pictureBox1.ImageLocation = dgv_MouseOverCell.Value.ToString();
                    pictureBox1.Location = new System.Drawing.Point(Cursor.Position.X - this.Location.X, Cursor.Position.Y - this.Location.Y);
                    pictureBox1.Visible = true;
                }
            }
        }
    }

    private void metroGrid1_CellMouseLeave(object sender, DataGridViewCellEventArgs e)
    {
        pictureBox1.Visible = false;
    }

Click here to view image