How to override default tooltip format using tooltipShowing event for igDataChart

2515

Ray Webb posted over 5 years ago

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 tooltip
var tooltip = GetChartTooltip(ui);
if (tooltip != '') {
ui.element.tooltip().text(tooltip);
}
}

Top Replies

2515

Offline Ray Webb posted over 5 years ago in reply to Aleksandar Kamenov +1
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...view reply »
1740

Offline Aleksandar Kamenov posted over 5 years ago in reply to Ray Webb +1 verified
Hello Ray, 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...view reply »

1740

Offline Aleksandar Kamenov posted over 5 years ago in reply to Ray Webb

Hello Ray,

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
Cancel
Reply

Cancel
1740

Offline Aleksandar Kamenov posted over 5 years ago in reply to Ray Webb

Hello Ray,

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!
Cancel
Reply

Cancel
2515

Offline Ray Webb posted over 5 years ago in reply to Aleksandar Kamenov

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.
Cancel
Reply

Cancel
1740

Offline Aleksandar Kamenov posted over 5 years ago in reply to Ray Webb

Hello Ray,

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.
Cancel
Reply

Cancel
2515

Offline Ray Webb posted over 5 years ago in reply to Aleksandar Kamenov

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
Cancel
Reply

Cancel