Home Forums Chart Support Tooltip Width and Position

Tooltip Width and Position

Viewing 4 posts - 1 through 4 (of 4 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 3 months, 1 week ago by nehamahajan.
    #34016

    @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

    #34243

    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.

    Thanks,
    Neha Mahajan

    #34260

    @nehamahajan,

    In order to wrap the tooltip content after a certain width, you need to first check the width of the tooltip content by creating a dummy DOM element. To get the tooltip content, you can use updated event of tooltip. If the width exceeds max-width i.e. 200px in your case, you can add css property to tooltip and it’s child elements to control the width of it. Please refer to below code snippet.

    .
    .
    toolTip: {
        updated: function(e) {
          var width = getToolTipWidth(e.content);
          if(width > 199) {
          	jQuery(".canvasjs-chart-tooltip").addClass("custom-tooltip-width");
            jQuery(".canvasjs-chart-tooltip .content").addClass("wordwrap");
          } else {
          	jQuery(".canvasjs-chart-tooltip").removeClass("custom-tooltip-width");
            jQuery(".canvasjs-chart-tooltip .content").removeClass("wordwrap");
          } 
        }
    }
    .
    .
    function getToolTipWidth(content) {
      var validationDom = document.createElement("div");   // Create a <button> element
      validationDom.innerHTML = content; 
      validationDom.style.display = "inline-block";// Insert text
      validationDom.style.maxWidth = "200px";// Insert text
      document.body.appendChild(validationDom);
      toolTipWidth = jQuery(validationDom).width();
      validationDom.remove();
      return toolTipWidth;
    }
    

    Also, please refer to this JSFiddle for complete working code.

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.