Link inside of a Highcharts tooltip

Question

I'm trying to replicate the behaviour of this fiddle for my application. It all works fine when I'm on a PC or Mac. I've also tested on a few tablets, but it doesn't want to work on an iPad, which is a large user base for my app.

[http://jsfiddle.net/PLUpR/show/][1]

Any help would be very appreciated!!!

Answer 1

You can catch click event on the point and load url link.

data : [{
                x : Date.UTC(2011, 3, 25),
                title : 'H',
                url: 'http://www.google.com',
                text : 'google'
            }],
            point:{
                events:{
                    click: function(){
                        var url = this.url;
                        window.open(url,'_blank');
                    }
                },
            },

See the example: http://jsfiddle.net/PLUpR/3/

Answer 2

Like Sebastian Bochan mentioned, it seems like a Safari issue, rather a security issue in general, that won't allow opening of windows using javascript. The request to open a new window needs to be user initiated like clicking of a link, and not through a javascript code block;

Although you have set the text to

<a href="http://www.google.com"> google </a>

Highcharts generates SVG spans for the links in the tooltip, and this spans have an onclick handler that opens a window. See below the default html/svg generated for the flag tooltip

<text x="8" y="21" zIndex="1" style="font-size:12px;color:#333333;width:200px;fill:#333333;">      
   <tspan style="font-size: 10px" x="8">Monday, Apr 25, 2011</tspan>
   <tspan onclick="location.href=&quot;http://www.google.com&quot;" x="8" dy="16" style="cursor: pointer;"> google </tspan>
</text>

Safari would disallow onclick="location.href="http://www.google.com""

Luckily, Highcharts allows you to skip the SVG, and use direct html in your tooltip. All you need to do is set tooltip.useHTML to true, which is by default false. Voila, the following HTML is now generated for the tooltip, and I believe Safari would not have issues with this, thought I have not been able to try this myself

<div class="highcharts-tooltip" style="position: absolute; left: 912px; top: 70px; visibility: visible;">
   <span style="position: absolute; white-space: nowrap; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); margin-left: 0px; margin-top: 0px; left: 8px; top: 8px;" zindex="1">
     <span style="font-size: 10px">Sunday, Mar 24, 18:34:45</span><br>
       <a href="http://www.google.com"> google </a><br>
   </span>
</div>

Demo @ jsFiddle