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

Vacancy

Did you try different browsers on your ipad? Safari vs. Chrome? – Seat

Yes i did. It doesnt work on either. – Vacancy

I tested it on iPad (iOS 7.0.3) and all works properly, which version do you have? – Unsay

Tried on iPad and iPhone (iOS 7.1). Maybe the question was not clear. The fiddle shows up, but the point of the fiddle is that there's a data label with a link inside going to google in this case. On a PC i can click on the link and it will go to that page, but on iPad it doesn't react... – Vacancy

You should really consider putting up what you've already done. That would help. – Elijaheliminate

Answer 1

By pure coincidence i happened to come across this resource.

Add this code to your js script and it fixes the issues with clicking on mobile devices!! After adding this the iPad browser reacted to clicks on canvas and tooltips as expected.

Vacancy

glad you found a working solution. Did the solution that I provided that uses HTML not work? Want to know the feedback on the answer as I don't have an iOS device to test myself – Kelbee

unfortunately not. It seems all to do with the way an iPad would interpret the pinching and clicking and zooming etc. Hence the issues. On a PC this would work fine, as in the initial fiddle, but for touch these events change and don't react in the same way. I appreciate the suggestion, thanks! – Vacancy

Answer 2

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/

Unsay

Thanks Sebastian. This would be correct for the PC experience. However on the iPad you have to click on a point to show you tooltip, which means you show tooltip and immediately send the person on to another page. I need to be able to show the tooltip, if they want to click on the link then is a choice. – Vacancy

In general it looks like a problem with window.open in the javascript. I preapre example which works on PC (jsfiddle.net/PLUpR/12) Relted topic #9880816 – Unsay

Answer 3

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

Kelbee

Answer 4

Simply useHTML not enough.

tooltip: {
  useHTML: true,
  style: {
    pointerEvents: 'auto'
  }
},

Jello