CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraphighcharts
James
James

Reputation: 557

making title in highcharts clickable and work with bootstrap popover?

Hi I was wondering how to make the title in highcharts a link so that it would work with bootstrap's popover functionality. Here is a fiddle

http://jsfiddle.net/287JP/4/

$(function () {
         $('#container').highcharts({
             chart: {},
             title: {
                 text: 'Sales Funnel ' + '<a style="font-size:12px" id="popoverFunnel" data-toggle="popover" title="hello" data-content="hellooo">Hello</a>' 
             },
             xAxis: {
                 minPadding: 0.05,
                 maxPadding: 0.05
             },

             series: [{
                 data: [{
                     x: 0,
                     y: 29.9,
                     url: 'http://www.google.com'
                 }, {
                     x: 1,
                     y: 71.5,
                     url: 'http://www.yahoo.com'
                 }]
             }],


             plotOptions: {
                 series: {
                     cursor: 'pointer',
                     point: {
                         events: {
                             click: function () {
                                 var url = this.options.url;
                                 window.open(url);
                             }
                         }
                     },
                 }
             },
         });
     });

    $('document').ready(function () {
        $('#popoverFunnel').popover();
    });

Thank you James

Upvotes: 1

Views: 3737

Answers (2)

xke
xke

Reputation: 1093

I took your example and made it work with Bootstrap. See http://jsfiddle.net/key2xanadu/zfsfz0c9/.

The solution involves ID tagging the puppies and then tooltipping them at the bottom:

$('document').ready(function () { 
    $("#text_title").tooltip({placement: 'bottom', title:"HELLO TITLE!"});
    $("#label_one").tooltip({placement: 'bottom', title:"HELLO ONE!"});
    $("#label_two").tooltip({placement: 'bottom', title:"HELLO TWO!"});
});

Example also shows how to add tooltips to the x-axis labels!

Upvotes: 2

Paweł Fus
Paweł Fus

Reputation: 45079

Set title.useHTML = true, see: http://jsfiddle.net/287JP/5/

     $('#container').highcharts({
         title: {
             useHTML: true,
             text: 'Sales Funnel ' + '<a style="font-size:12px" id="popoverFunnel" data-toggle="popover" title="hello" data-content="hellooo">Hello</a>' 
         },
         ...
     });

Upvotes: 4

Related Questions