Reply To: Tooltip Width and Position

[Manoj Mohan]

@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