Geek Answers Handbook

Use Twitter Bootstrap popover with Highcharts

I am trying to implement the Twitter Bootstrap popover component with Highcharts when a user hovers over a panel in my histogram. I cannot use the existing tooltip that is native to Highcharts, because I want my user to interact with the contents inside the popover, which you cannot effectively do with the help of the tooltip Highcharts, such as clicking on a link.

The problem I am facing is accessing individual rect DOM elements to add the necessary attributes, such as rel="popover" and data-content="foo" , that will do the job.

I have a JSFiddle where I have pseudocode for the event to hang.

I would really appreciate any advice.

Thanks!

+4
source share
1 answer

You need to do two things:

  • Attach a popover after loading the chart

  • Make sure popup is not added inside SVG

      chart: { renderTo: 'container', type: 'bar', events: { load: function(e) { $(".highcharts-tracker rect").popover({trigger:'hover', placement:'bottom', title:'Title!', content:'Content'}).hover(function() { $('.popover').appendTo($(document.body)); }); } } },

If you want it to fire when clicked, just change it to:

  $(".highcharts-tracker rect").popover({trigger:'click', placement:'bottom', title:'Title!', content:'Content'}).click(function() { $('.popover').appendTo($(document.body)); });

You will have to further modify this code to suit your needs, but this should help you get started.

Working example: JSfiddle

+2
source

More articles:


All Articles