Home Forums Chart Support Tooltip Width and Position Reply To: Tooltip Width and Position



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 .content").addClass("wordwrap");
      } else {
        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
  toolTipWidth = jQuery(validationDom).width();
  return toolTipWidth;

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

Manoj Mohan
Team CanvasJS