Customizing the tooltip

[Santhosh]

Hi,

Can I customize the tooltip by making our own html? as described in the sample

Attachment: SyncFusion_fde52092.zip

[Dharanidharan Dharmasivam]

Hi Santhosh, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and achieved your requirement as workaround using toolip template with CSS styles. Find the code snippet to achieve this requirement. 

JS: 

<div class="triangleTooltip" id="tooltipTemplate" style="display:none;"> 

        #series.name# <br /> #point.x# : #point.y# 

    </div> 

 

$("#container").ejChart( 

            { 

commonSeriesOptions: 

                { 

                    type: 'stackingbar', 

                    enableAnimation: true, 

                    tooltip: { visible: true, template: "tooltipTemplate", } 

                }, 

}); 

 

<style> 

        .triangleTooltip { 

            position: relative; 

            background: #88b7d5; 

            top: 50%; 

        } 

       .triangleTooltip:after, .triangleTooltip:before { 

                right: 100%; 

                top: 50%; 

                border: solid transparent; 

                content: " "; 

                height: 0; 

                width: 0; 

                position: absolute; 

                pointer-events: none; 

            } 

 

       .triangleTooltip:after { 

                border-right-color: #88b7d5; 

                border-width: 12px; 

                margin-top: -12px; 

         } 

 

       .triangleTooltip:before { 

                border-right-color: #c2e1f5; 

                border-width: 15px; 

                margin-top: -15px; 

        } 

    </style> 

Screenshot: 

 

You can change this with respect to your scenario. Sample for reference can be find from below link. 

https://jsplayground.syncfusion.com/bheoimql  

Thanks, 

Dharani.