I am trying to use the tooltipShowingevent to override the tooltip displayed when the mouse hovers over a chart column. A valid HTML string is returned to tooltip from GetChartTooltip (a function I created), however, the column tooltip is still the default tooltip defined within Infragistics rather than my modified tooltip. How can I get my custom tooltip to be displayed?
tooltipShowing: function (evt, ui) {// Programmatically set the tooltipvar tooltip = GetChartTooltip(ui);if (tooltip != '') {ui.element.tooltip().text(tooltip);}}
Hello Ray,
Could you please try to take that action on the tooltipShown event handler.
Please let me know if this approach fixes your problem?
Actually, the results were worse. When displayed, the tooltip included the text for all of the tags I used to create the tooltip. For example, my tooltip included a '<div>'. So '<div>' was what I saw in the displayed tooltip. For example, rather than seeing '123', I saw '<div>123</div>'.
As you say, you can't include any HTML tags to control the look of the tooltip using this technique. Other libraries with tooltip support do permit including HTML tags, so the Infragistics implementation would appear to be very limiting here, although, you can create a script template and include HTML tags there.
Actually, I've found a solution.I've refactored the sample and that's what I did. I just took the tooltip as an element. Then with JQuery, I've managed to take the child I need to modify (change the text), without breaking the structure of the tooltip.
Could you please take a look at the updated example.
0245.pie-chart-tooltip-text.zip
Your suggestions work perfectly with a Pie Chart. But when I try the same thing with a Data Chart, the tooltip cannot be overwritten this way. It always reverts back to the default tooltip.
It depends on how you have set up your data chart.
It needs to be as same as the example I've sent.
You are probably not using the same template but the default one?As you can see from the example, I'm just taking the tooltip template as it is and I'm referencing the child element that needs modification. In our case, this is the '#tooltipValue' span element.
I've made the same example but this time with the data chart.
Please make sure that you've checked and went through the API of the data chart because it is no the same as the pie chart.
More particularly you can see the data chart API for Setting up a tooltipTemplate and how to show the tooltip at first.
If you have further questions, please let us know.
data-chart-tooltip.zip
Your solution works. My real problem was that I had an error in the new HTML replacing the tooltip. I also simplified the example a little bit. The script for the tooltip can be somewhat simpler. The modified example is attached.
5270.data-chart-tooltip.zip
I couldn't see where the problem really is.
I've built your example and everything went well, even the display of the tooltip.
You can see the result from the attached screenshot
Today I wasn't able to look closely at your matter and I apologize for this.I will make everything possible to give you some response until tomorrow.
Thanks for you patience!
I checked my attachment and my changes are there. As I said, they were small changes. I replaced the template:
<script id="tooltipTemplate" type="text/x-jquery-tmpl"> <div id="tooltip" class="ui-widget-content ui-corner-all"> <div style="margin:10px;color:#7446B9"> <span id="year">${item.Year}</span> <span id="tooltipValue">Population: ${item.Canada}</span> </div> </div></script>
with
<script id="seriesTemplate" type="text/x-jquery-tmpl"> <div id="seriesTooltip"></div> </script>
and updated the HTML for seriesTooltip. All I did was make the template more generic.
Actually, I couldn't manage to find any differences from the sample I've sent you. Respectively I haven't found any errors.
Could you please make sure that you are attaching the right example.
I'm looking forward for you sample.