Tooltip Width and Position

[nehamahajan]

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 years, 8 months ago by nehamahajan.

[Vishwas R]

@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.

—
Vishwas R
Team CanvasJS

[nehamahajan]

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

[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