Series tooltip text outside box

[remmondParticipant]

When rendering the series tooltip the text overflows vertically out of the tooltip box at the bottom.

I’m using this toolTipFormatFunction for the series:

var toolTipFormatFn = function (value, itemIndex, serie, group, xAxisValue, xAxis) {
return ‘<div style=”text-align: left”><b>’ + moment(xAxisValue).format(‘YYYY-MM-DD hh:mm:ss’) + ‘</b><br />’
+ serie.displayText + ‘: ‘ + value.toFixed(6) + ‘</div>’};

I’m using bootstrap 3.3.4 as my js framework.

V3.8.1 of jQWidgets.

[ivailoParticipant]

Hi remmond,

We can’t see that kind of behavior, but we will investigate it.
Like a workaround via CSS you can add width with some value to solve the problem.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[remmondParticipant]

Hi Ivailo,

Thanks for the reply. I’m going to have a look at the CSS applied, I’m sure it’s some other 3rd party css messing it up. Every example of charts I’ve seen works perfectly. I’ll post anything I find here.

Regards,
Paul

[remmondParticipant]

Narrowing down the problem I found that bootstrap.css defines:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          
  box-sizing: border-box;
}

If I disable this, box-sizing reverts to content-box instead of border-box and the chart tooltips render correctly.

I tried creating a new class with border-box set and assigning it to the toolTipClass, but it doesn’t fix the problem.

I also tried setting the class with the chart and it doesn’t fix the problem. So I’m not sure what to try next.

Any suggestion? Is it possible I missed something when setting up jQWidgets with bootstrap? I included the jqx.bootstrap.css and jqx.base.css everything else seems to be working correctly (jqx grids and everything else in charts other than tooltips).

[ivailoParticipant]

Hi remmond,

You have to add the new CSS to #contentDiv.
Here is simulation of that behavior and fix.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[remmondParticipant]

Awesome Ivailo that worked!

I had a strange issue where I had to refresh the page a couple time before the fix kicked in, maybe it was caching the css, not sure.

Thanks again,
Paul

[Author]

Posts