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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customizing the tooltip

Thread ID:

Created:

Updated:

Platform:

Replies:

131110 Jun 21,2017 06:12 AM UTC Jun 22,2017 01:04 PM UTC JavaScript 1
loading
Tags: ejChart
Santhosh
Asked On June 21, 2017 06:12 AM UTC

Hi,

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



Attachment: SyncFusion_fde52092.zip

Dharanidharan Dharmasivam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;