How to add multiple images with tooltip in a single cell?

How to add multiple images with tooltip in a single cell?

Posted by: warrentristen28 on 15 September 2020, 6:46 am EST

• 

  warrentristen28

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 September 2020, 6:46 am EST

  In one cell I want 2 images A and B. When I hover over image A i want to display “Tooltip A” and when I hover over image B i want to display “Tooltip B”.

• 

  wknauf

  • Post Options:
  • Link
    Copy

  Posted 16 September 2020, 5:44 am EST

  Hi,

  to display two images in one cell, you have to create a combined image - see e.g. http://www.niteshluharuka.com/combine-several-images-to-form-a-single-image-using-c/

  The tooltip is bit more complicated. See attached sample “C1FlexGridToolTip.zip”: all cells display a custom image with two parts, and when the mouse moves inside the image, a WinForms ToolTip display a text “left part” or “right part”, dependending on the cursor position.
  
  C1FlexGridToolTip.zip

  This is the relevant part of code which calculates the tooltip text (there might be bugs if the cell is e.g. scrolled down/to the right):

      private void c1FlexGrid1_MouseMove(object sender, MouseEventArgs e)
      {
        HitTestInfo hitTest = this.c1FlexGrid1.HitTest(e.Location);
  
        if (hitTest.Row >= this.c1FlexGrid1.Rows.Fixed && hitTest.Column == 1)
        {
          string tooltipText = "row " + hitTest.Row + ", col " + hitTest.Column;
  
          //Which part of image:
          Rectangle rectCell = this.c1FlexGrid1.GetCellRect(hitTest.Row, hitTest.Column);
          if (e.X < rectCell.Left + 100)
          {
            tooltipText += " ==> left side";
          }
          else
          {
            tooltipText += " ==> right side";
          }
  
          //Set tooltip only if it has changed - otherwise it would be permanently shown while moving the mouse inside the same cell:
          if (tooltipText != this.toolTip1.GetToolTip(this.c1FlexGrid1))
          {
            this.toolTip1.SetToolTip(this.c1FlexGrid1, tooltipText);
          }
        }
        else
        {
          //Reset tooltip:
          this.toolTip1.SetToolTip(this.c1FlexGrid1, string.Empty);
        }
      }
  

  Hope this helps
  
  Wolfgang

• 

  prabhat.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 16 September 2020, 8:01 am EST

  Hi,

  You can use the OwnerDrawCell event to custom draw the cell content which in this case will be drawing images. Then you can use the MouseMove event to check where the cursor and if it is on the picture of this cell, we can show tooltip using C1SuperToolTip. Since you will be drawing the contents yourself you will have to adjust the cell size accordingly. To avoid tooltip from showing on everywhere in the grid, in the popup event of the SuperTooltip the popup will need to be suppressed.

  A sample is attached for reference, please have a look.

  @Wolfgang, thank you for your suggestions.

  Regards,
  
  Prabhat Sharma.
  
  CellImageDraw.zip