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

Did you try different browsers on your ipad? Safari vs. Chrome? — Duniyadnd, Mar 16 '14 at 16:51
I tested it on iPad (iOS 7.0.3) and all works properly, which version do you have? — Sebastian Bochan, Mar 17 '14 at 11:20
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... — Lievcin, Mar 17 '14 at 11:46
You should really consider putting up what you've already done. That would help. — Shrayas, Mar 23 '14 at 09:49

score 2 · Answer 1 · answered Mar 18 '14 at 10:59

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/

answered Mar 18 '14 at 10:59

Sebastian Bochan

37,348
3
49
75

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. – Lievcin Mar 18 '14 at 11:02
In general it looks like a problem with window.open in the javascript. I preapre example which works on PC (http://jsfiddle.net/PLUpR/12/) Relted topic http://stackoverflow.com/questions/9880316/javascript-window-open-in-safari – Sebastian Bochan Mar 18 '14 at 12:54

score 2 · Answer 2 · answered Mar 18 '14 at 18:38

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

score 2 · Accepted Answer · answered Mar 19 '14 at 13:43

2

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.

answered Mar 19 '14 at 13:43

Lievcin

938
3
18
30

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 – Jugal Thakkar Mar 20 '14 at 06:14
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! – Lievcin Mar 20 '14 at 09:58
interesting. Thanks for the feedback. – Jugal Thakkar Mar 21 '14 at 06:00

score 0 · Answer 4 · edited Mar 21 '19 at 15:16

0

Simply useHTML not enough.

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

edited Mar 21 '19 at 15:16

fedorqui

275,237
103
548
598

answered May 31 '17 at 16:27

Dinesh Khetarpal

363
3
5

Link inside of a Highcharts tooltip

4 Answers4

Linked