JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
CSS
.tooltip {
position: absolute;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Tooltip for Stripline Label"
},
axisX2:{
stripLines:[
{
value:1955,
label : "25",
labelPlacement: "outside"
}
]
},
data: [
{
axisXType: 'secondary',
type: "spline",
dataPoints: [
{ x: 1910, y: 5 },
{ x: 1920, y: 9 },
{ x: 1930, y: 17},
{ x: 1940, y: 35},
{ x: 1950, y: 22},
{ x: 1960, y: 14},
{ x: 1970, y: 25},
{ x: 1980, y: 18},
{ x: 1990, y: 20}
]
}
]
});
chart.render();
/* https://stackoverflow.com/a/5047712 */
String.prototype.width = function(font) {
var f = font || '12px arial',
o = $('<div></div>')
.text(this)
.css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
.appendTo($('body')),
w = o.width();
o.remove();
return w;
}
function addStriplineLabelTooltip() {
var stripLine = chart.axisX2[0].stripLines[0];
var tooltip = $("<div class='tooltip'><span class='tooltiptext'>Tooltip Content</span></div>");
$(tooltip).css({"height": "12px", "width": stripLine.get("label").width() + "px", "left": stripLine.get("bounds").x1 + "px", "top": stripLine.get("bounds").y1 - 11 + "px"})
$(chart.container).append(tooltip);
}
addStriplineLabelTooltip();
$(window).resize(function() {
$(".tooltip").remove();
addStriplineLabelTooltip();
});
}