Annotation with Tool Tip

[Jaish Mathews]

Hello,

We have a requrement as below with same width 3 sections (green,yellow and red), but a tooltip to be displayed on each of these 3 sections for the value belongs to that section. I was thinking about annotation as mentioned here  Blazor Linear Gauge Annotation Example - Syncfusion Demos, but couldnt see a tooltip option and also not sure is this the correct control to use. ANy advice?

[Sabari Anand Senthamarai Kannan]

Hi Jaish, 

Thank you for contacting Syncfusion support. 

We can render different HTML content in the tooltip of the Linear Gauge component using “TooltipTemplate” in the “LinearGaugeTooltipSettings” class. The current value of the pointer can be displayed in the pointer using “context” object in the template. We can achieve your requirement using Grid and Linear Gauge components. Please find the code snippet for the same below. 

Code Snippet: 

<LinearGaugeTooltipSettings Type='new string[] { "Pointer" }' Enable="true"> 

    <TooltipTemplate> 

        @{ 

                var dataNumber = (context as SparklineGridData).id; 

                <div style="border-radius:2px; border:1px solid blue"> 

                    Value: @dataNumber 

                </div> 

            } 

    </TooltipTemplate> 

</LinearGaugeTooltipSettings> 

Note: The “context” object holds the value from the data source used in the Grid component. 

We have created a sample application with Grid and Linear Gauge components. It can be downloaded from the below link. 

https://www.syncfusion.com/downloads/support/forum/170442/ze/LinearGaugeGrid-1050066464 

Please let us know that the above sample meets your requirement. If not, please provide us more details about your requirement. It will be helpful for us to analyze and assist you further. 

Regards, 

Sabari Anand.

[Jaish Mathews]

Thankx

[Indumathi Ravi]

Hi Jaish, 

  

Thank you for the update. 

  

Please let us know if you need any further assistance. 

  

Regards, 

Indumathi R.