Monday 23 November 2020

How can I automatically wrap tooltip text content to multiple lines?

I'm using ChartJS to generate some charts. The data point tooltips are generated using callbacks via the configurations option:

tooltips: {
    position: 'average',
    mode: 'index',
    intersect: false,
    callbacks: {
        title: tooltipTitleCallback,
        label: tooltipLabelCallback
    }
},

The callbacks return a string of varying length. My problem is that ChartJS doesn't seem to provide any way to automatically wrap the text to multiple lines (similar to a Bootstrap tooltip). Instead, any text that doesn't fit on 1 line is truncated.

truncated tooltip

It does allow the callback to return an array of strings which it will separate by line break. Currently the only workaround I can think of is to measure the length of each tooltip and split the text into an array if it's sufficiently long (not responsive or ideal). I'd rather not re-make the wheel if there's a simple solution to this problem. Thanks for your help.



from How can I automatically wrap tooltip text content to multiple lines?

No comments:

Post a Comment