When you hover the mouse pointer over the red square box area, a tooltip will appear.
I would like to inquire about a solution so that the tooltip is displayed only when the mouse pointer is placed on the chart pointer.
Demo source and image are attached.
thank you
============================ Demo source ===================================
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript JSON to Series Example</title>
<meta charset="UTF-8"/>
<!--[if lt IE 9]>
<script src="../../src/excanvas/excanvas_text.js"></script>
<script src="../../src/excanvas/canvas.text.js"></script>
<![endif]-->
<script src="../../src/teechart.js" type="text/javascript"></script>
<script src="../../src/teechart-extras.js" type="text/javascript"></script>
<script src="../../src/teechart-table.js" type="text/javascript"></script>
<script src="../3rd_party/jquery/js/jquery-1.7.1.min.js"></script>
<script src="../demo.js" type="text/javascript"></script>
<!-- Bootstrap -->
<link href="../3rd_party/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../3rd_party/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<!-- Custom Theme Style -->
<link href="../3rd_party/build/css/custom.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript">
var Chart1, Chart2;
function draw() {
// XY Data, multiple series:
Chart2 = new Tee.Chart("canvasXY");
Chart2.title.text="JSON XY to Chart";
loadXYData(Chart2);
}
function loadXYData(chart) {
var jsonXY = document.getElementById("jsonXY").value,
list = JSON.parse(jsonXY).chart,
xyLine;
chart.series.items=[];
for (var t=0; t<list.length; t++) {
xyLine = chart.addSeries(new Tee.PointXY());
xyLine.pointer.visible=true;
xyLine.pointer.style=list[t].series.pointer;
xyLine.loadJSON( { value: list[t] });
}
changeTheme(chart, "minimal");
chart.draw();
//tooltip
var tooltip = new Tee.ToolTip(chart);
tooltip.render = "dom";
tooltip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
tooltip.domStyle = tooltip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
tooltip.domStyle = tooltip.domStyle + "border-style:solid;border-color:#ff0000;border-width:1px; z-index:1000;";
chart.tools.add(tooltip);
tooltip.onhide=function() { scaling=0; poindex=-1; }
var t = new Tee.CursorTool(chart);
t.direction="both";
tooltip.onshow=function(tool,series,index) {
if (!enableCursor){
chart.tools.add(t);
enableCursor = true;
}
}
tooltip.old_refresh=tooltip.refresh;
tooltip.refresh = function(series,index) {
tooltip.old_refresh(series,index);
}
tooltip.ongettext = function( tool, text, series, index)
{
return "<font color='black' >title : " + series.title + " text : " + text + "</font>";
}
}
</script>
</head>
<body onload="draw();">
<div class="right_col" role="main">
<div class="page-title">
<div class="title_left">
<h3>TeeChart for JavaScript <span class="smallLetters">Tee Chart from JSON</span></h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="x_panel">
<div class="x_title">
<h2><span class="smallLetters">JSON XY to Chart</span></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link" onclick="showHide(this)"><i class="fa fa-chevron-up"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div style="float:left;">
<b>JSON data, multiple series including X and Y values:</b><br/>
<textarea id="jsonXY" rows="20" cols="40" wrap="soft" style="width: auto">
{
"chart": [
{
"series": {
"name":"Data 1",
"color":"Blue",
"metric":"Y Axis",
"category":"X Axis",
"pointer":"rectangle",
"point": [
{ "value":123, "x": 21 },
{ "value":456, "x": 14 },
{ "value":789, "x": 33 }
]
}
},
{
"series": {
"name":"Data 2",
"color":"Red",
"metric":"Y Axis",
"category":"X Axis",
"pointer":"triangle",
"point": [
{ "value":321, "x": 15 },
{ "value":555, "x": 24 },
{ "value":111, "x": 3 }
]
}
},
{
"series": {
"name":"Data 3",
"color":"Green",
"metric":"Y Axis",
"category":"X Axis",
"pointer":"ellipse",
"point": [
{ "value":321, "x": 35 },
{ "value":555, "x": 17 },
{ "value":111, "x": 23 }
]
}
}
]
}
</textarea>
<br/>
<button type="button" onclick="loadXYData(Chart2)">Refresh</button>
</div>
<br><canvas id="canvasXY" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</div>
</div>
</div>
</div>
</body>
</html>
