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>'.
Yes, this is the expected behaviour because we are escaping the value that you are passing due to security reasons.I believe that you are aware of XSS attacks.
I have attached a simple example that demonstrates a successful modification of tooltip text.
If you have further questions, please contact us again.
pie-chart-tooltip-text.zip
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