Link inside of a Highcharts tooltip

问题

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

回答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/

回答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

回答3:

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.

回答4:

Simply useHTML not enough.

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

来源：https://stackoverflow.com/questions/22427025/link-inside-of-a-highcharts-tooltip