Home Forums Chart Support Tooltip Width and Position

Tooltip Width and Position

Viewing 3 posts - 1 through 3 (of 3 total)
  • #33985

    Hi Canvasjs Chart Team,

    I have the following jsfiddle: https://jsfiddle.net/nehamahajan/n37h8cbf/12/

    My requirement is that there is a max-width set on the tooltip and
    1) Tooltip should always appear outside chart area on the right side

    But if you see in the jsfiddle demo, the tooltip content text wraps before the max-width property is reached.

    How do i make sure the text wraps only when max-width is reached.

    Thank you fro your time.

    • This topic was modified 2 weeks, 5 days ago by nehamahajan.


    You can customize the max-width of tooltip & it’s content by setting following CSS style properties for tooltip & it’s children.

    .wordwrap { 
       white-space: pre-wrap;
    .canvasjs-chart-tooltip * {
      max-width: 200px !important; 
    .canvasjs-chart-tooltip {
      left: 250px !important;
      width: 200px;

    Please take at this JSFiddle for complete code.
    Fixing the Position of Tooltip

    Vishwas R
    Team CanvasJS


    Hi Vishwas,

    The max-width works but now if you reduce the tooltip text, such that toolTipContent = “Lorem Ipsum” in the fiddle, the tooltip width still remains 200px but doesn’t reduce to the text content.

    What can we do in such case.

    Neha Mahajan

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

You must be logged in to reply to this topic.