Tooltip or Notes with html In cells

[Tomas De arco]

Hi friends,

1. Does Syncfusion Spreadsheet offer the functionality to add custom tooltips to cells? If so, how can I implement tooltips that display additional information when the user hovers over a cell?
2. Is it possible to insert HTML content, such as bootstrap styles, inside cell notes in Syncfusion Spreadsheet? If so, could you provide an example of how to do this?"

[Janakiraman Sakthivel]

Hi Tomas De arco,

Query1: Does Syncfusion Spreadsheet offer the functionality to add custom tooltips to cells? If so, how can I implement tooltips that display additional information when the user hovers over a cell?

We have validated your reported requirement. You can add additional information to specific cells using our Notes feature, which will display the information when the user hovers over the cell.

There are different ways to add a note to a cell. Please refer to the link below for more information on how to add notes.

https://ej2.syncfusion.com/javascript/documentation/spreadsheet/notes#adding-a-note

Cells containing notes will be indicated by a red triangle in the top-right corner. Hovering the mouse over these cells will display the content of the notes.

For your reference, we have added notes to cell A1 in the shared sample below. Hover over cell A1 to display the notes.

Sample: https://stackblitz.com/edit/bgwic4-myz5bc?file=index.js

CODE SNIPPET:

cells: [

                 { value: 'Hover here', notes: 'Notes added in cell A1' },

          ]

For more details regarding Notes support, please refer to the below links.

Demo: https://ej2.syncfusion.com/javascript/demos/#/fluent2/spreadsheet/notes.html

UG: https://ej2.syncfusion.com/javascript/documentation/spreadsheet/notes


Query2: Is it possible to insert HTML content, such as bootstrap styles, inside cell notes in Syncfusion Spreadsheet? If so, could you provide an example of how to do this?"

We have reviewed your request and understand that you would like to add an HTML element, such as a button, inside the cell notes. Unfortunately, our notes feature does not support this functionality.

If we have misunderstood your requirement, could you please provide more detailed information and screenshots to help us better understand your needs? Based on this information, we will check and share the further details.

[Tomas De arco]

Hi friends, I really appreciate your help.

Another Questions:

1. Is it possible to insert rich formatted text and icons into the cell notes?.
2. Can I change the red triangle icon for the notes (for example only in the first row).

Again, I really appreciate your help.

[King Boss]

Hi there,

Yes, Syncfusion Spreadsheet does support adding custom tooltips to cells, providing a way to display additional information when users hover over cells. Here’s how you can implement this functionality:

1. Adding Custom Tooltips: Syncfusion Spreadsheet allows you to set cell comments that can act as tooltips. You can define these comments programmatically or through the user interface. Here’s a basic example of how to set a tooltip programmatically using Syncfusion:

   csharp
   Copy code
   // Assuming you have a reference to the worksheet
   IWorksheet worksheet = workbook.Worksheets[0];
   
   // Set a comment for a cell
   worksheet.Range["A1"].AddComment().Text = "Additional information tooltip";
   

   This sets a tooltip for cell A1. When users hover over this cell in the Spreadsheet UI, they will see the comment text as a tooltip.

2. Inserting HTML Content in Cell Notes: Syncfusion Spreadsheet supports inserting rich content, including HTML, into cell comments. This allows you to format the tooltip text with styles such as Bootstrap CSS. Here’s an example:

   csharp
   Copy code
   // Set a comment with HTML content
   IComment comment = worksheet.Range["A1"].AddComment();
   comment.Text = "<div class='tooltip-content'><h3>Tooltip Header</h3><p>This is a tooltip with <strong>formatted text</strong>.</p></div>";
   comment.HtmlDisplayMode = HtmlDisplayMode.Html;
   

   In this example, the comment text includes HTML markup (<div> and <p> tags) with Bootstrap styles (assuming you have included Bootstrap CSS in your project).

3. Displaying HTML Content: Ensure that you set the HtmlDisplayMode property of the comment to Html to render the HTML content properly when the user hovers over the cell.

By using these methods, you can enhance user interaction with Syncfusion Spreadsheet by providing informative tooltips and formatting them using HTML, including Bootstrap styles.

If you have any more questions or need further assistance with implementing tooltips or inserting HTML content in Syncfusion Spreadsheet, feel free to ask!

Best regards,

[Tomas De arco]

Hi friends, I really appreciate your answer.

But I do not know how to implement this in my javascript spreadsheet, because I see this code is for C Sharp.

Can you provide me an example in javascript?

[Janakiraman Sakthivel]

Hi Tomas De arco,

Sorry for the inconvenience caused. Please ignore the last update in this forum.

Query1: Is it possible to insert rich formatted text and icons into the cell notes?

Currently, we do not have the option to insert rich formatted text and icons into cell notes in our spreadsheet, as you requested. There are some limitations in our notes support. Please find more details regarding this at the link below:

https://ej2.syncfusion.com/javascript/documentation/spreadsheet/notes#limitations

Query2: Can I change the red triangle icon for the notes (for example only in the first row).

We have validated your reported requirement and have some doubts regarding your exact requirement. Therefore, before we proceed further, please confirm whether you would like to change the red triangle color or add an icon instead of the red triangle only in the first row. Additionally, please share more details regarding your exact requirements and provide an image for our reference. Based on these details, we will check and provide a better solution quickly.