score:2

Accepted answer

I would up just using a CSS selector: .highcharts-legend-item:first-child:hover { cursor:crosshair; }

score:0

I make it actually with modal with mouse hover event, This is how you can do this, please insert this code in your chart function:

$('#chart_container').on('mouseenter','.highcharts-legend-item',function(event) {
    var seriesName = $(this).text();
    if (seriesName === "this_series_name") {
        $('#myModal').modal('toggle');
    }
});

Then you can make a modal div to open with hover event like this one below

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title" id="myModalLabel">Note</h4>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        your message here
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Ok
                </button>
            </div>
        </div>
    </div>
</div>

this is a demo


Related Query

More Query from same tag