Accepted answer

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


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") {

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">
                <h4 class="modal-title" id="myModalLabel">Note</h4>
            <div class="modal-body">

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

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

this is a demo

Related Query

More Query from same tag