We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Customizing the tooltip

Hi,

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



Attachment: SyncFusion_fde52092.zip

1 Reply

DD Dharanidharan Dharmasivam Syncfusion Team June 22, 2017 01:04 PM UTC

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. 

Dharani. 


Loader.
Live Chat Icon For mobile
Up arrow icon