Home Forums Chart Support Completely custom tooltip

Completely custom tooltip

Viewing 4 posts - 1 through 4 (of 4 total)
  • #17666

    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.



    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.

    changing tooltip style using css

    Bivek Singh,
    Team CanvasJS


    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!



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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.