Accepted answer

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.


Simply useHTML not enough.

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


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

data : [{
                x : Date.UTC(2011, 3, 25),
                title : 'H',
                url: '',
                text : 'google'
                    click: function(){
                        var url = this.url;

See the example:


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=""> 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;;" x="8" dy="16" style="cursor: pointer;"> google </tspan>

Safari would disallow onclick="location.href=&quot;;"

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=""> google </a><br>

Demo @ jsFiddle

Related Query

More Query from same tag