Geek asks and answers

Highcharts + Plotband tooltip + default style

I am trying to find the easiest way to show a tooltip when you hover over a strip. Some of the events are fine, I can access the mouse pointer, but I need to find a way to display the tooltip in the same style as the default appearance for Highcharts.

Here is a quick example . Do I need the text "Show me when you hover over the tooltip" to display as a tooltip, like for Highcharts by default somewhere based on mouse coordinates?

I looked through the docs and did not find any help.

Any ideas?

Thanks in advance.

+5
source share
3 answers

, JSFiddle, .

mouseover:

chart.tooltip.refresh(chart.series[1].points[2]);

.

.

+5

, , , , . , plotBands.

, div , .

JSFiddle.

, ,

<div id="tooltip" class="thetooltip">
    <p id="tooltiptext" style="margin:0">default</p>
</div>

,

var $tooltip = $('#tooltip');
$tooltip.hide();
var $text = $('#tooltiptext');
displayTooltip = function (text, left) {
    $text.text(text);
    $tooltip.show();
    $tooltip.css('left', parseInt(left)+24 + 'px');
};
var timer;
hideTooltip = function (e) {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $tooltip.fadeOut();
    }, 5000);
};

, tooltipText div .

plotLines: [{
    tooltipText: 'hello',
    value: Date.UTC(2011, 2, 28, 0, 1, 1),
    color: '#ff6666',
    dashStyle: 'solid',
    width: 3,
    events: {
        mouseover: function (e) {
            displayTooltip(this.options.tooltipText, this.svgElem.d.split(' ')[1]);
        },
        mouseout: hideTooltip
    }
}

tooltipText highcharts api, , options .

Css , css:

.thetooltip {
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}
+7

label plotBands/plotLines useHTML: true CSS hover.

xAxis: {
//...code    
   plotLines: [{
      //...code
      dashStyle: 'Dash',
      color: '#000000', 
      width: 2,
      label: {
          text: `<div class="plotline">
                     <div id="custom-tooltip" class="thetooltip">
                         My custom tooltip!
                     </div>
                 </div>`,
          useHTML: true,
      }
   }]
}

CSS:

.thetooltip {
    display: none; //the main change
    border: 1px solid #2f7ed8;
    background-color: #fff;
    opacity: 0.8500000000000001;
    padding: 4px 12px;
    border-radius: 3px;
    position: absolute;
    top:100px;
    box-shadow: 1px 1px 3px #666;
}

, , plotline:

.plotline {
     &:hover {
       .thetooltip {
          display: block;
        }
     }
}

, - -, CSS, JS, UX/UI , JS ( - !)

+1
source

More articles:


All Articles