Completely custom tooltip

[sbsbsb]

Is it possible to specify a completely custom tooltip? From what I can tell in the documentation, the content and contentFormatter only pertain to the internal content of the tooltip. I’d like to replace the entire thing including borders, so that I can apply styling with plain CSS instead of using the options available on the built-in toolTip.

[Bivek Singh]

@sbsbsb

You can customize tooltip as per your requirement by modifying styles of canvasjs-chart-tooltip class.
Kindly take a look at the code snippet below,

.canvasjs-chart-tooltip div{
    border-radius : 50% !important;
    width : 50px !important;
    height : 50px !important;
    
}

.canvasjs-chart-tooltip {
      box-shadow : rgba(0, 0, 0, 0) 1px 1px 2px 2px !important

} 

Please take a look at this JSFiddle for an example on creating custom Tooltip styles using CSS.

—–
Bivek Singh,
Team CanvasJS

[sbsbsb]

Thank you, that worked. I do think it would be simpler just to pass in my own HTML so it isn’t necessary to know your internal implementation details about what CSS attributes to override, but that’s more of a feature request. Thanks!

[Suyash Singh]

@sbsbsb,

Thanks for the suggestion we will consider it for the future versions.
___
Suyash Singh
Team CanvasJS