You must be logged in to post your query.
Home › Forums › Chart Support › Tooltip Width and Position
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.
@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
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
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
You must be logged in to reply to this topic. Login/Register