HTMLcopy
x
1
<table style="width:100%" id="table">
2
<tr>
3
<th style="width:1%">Region</th>
4
<th>Chart</th>
5
</tr>
6
<tr>
7
<td>very long text value</td>
8
<td>
9
<div id="container"></div>
10
</td>
11
</tr>
12
</table>
13
14
<div id='custom-tooltip'></div>
CSScopy
42
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
8
#container {
9
width: 100%;
10
height: 100%;
11
margin: 0;
12
padding: 0;
13
}
14
15
table, th, td {
16
border: 1px solid black;
17
border-collapse: collapse;
18
}
19
20
td {
21
width: 100px;
22
max-width: 100px;
23
white-space: nowrap;
24
overflow: hidden;
25
text-overflow: ellipsis;
26
}
27
28
#custom-tooltip {
29
position: absolute;
30
display: none;
31
z-index: 10000;
32
border-radius: 3px;
33
padding: 5px 10px;
34
background-color: rgba(33, 33, 33, 0.7);
35
border: none;
36
box-sizing: border-box;
37
letter-spacing: normal;
38
color: #fff;
39
font-family: Verdana, Helvetica, Arial, 'sans-serif';
40
font-size: 12px;
41
margin: 3px 0px 3px 3px;
42
}
JavaScriptcopy
40
1
var chart = anychart.bullet([
2
{value: 637.166}
3
]);
4
5
chart.range().from(0).to(750);
6
chart.bounds(0, 0, "100%", 100);
7
chart.container("container").draw();
8
9
10
//
11
// create a HTML tooltip
12
var tooltip = document.getElementById('custom-tooltip');
13
14
function positionTooltip(e) {
15
// place the tooltip in the calculated position
16
tooltip.style.left = e.offsetX + "px";
17
tooltip.style.top = e.offsetY + "px";
18
}
19
20
function customTooltipMouseOver(e) {
21
// place the tooltip on the initial show
22
positionTooltip(e);
23
tooltip.innerHTML = 'custom tooltip' +
24
'<br>' +
25
"<a href='https://www.anychart.com/'target='_blank'>B&HPhoto</a>"
26
// display the tooltip div
27
tooltip.style.display = "block";
28
}
29
30
function customTooltipMouseOut() {
31
tooltip.style.display = "none";
32
}
33
34
// add listeners
35
const list = document.querySelectorAll("#table tr:not(.top-row) > td:first-child");
36
list.forEach(e => e.addEventListener("mouseover", customTooltipMouseOver));
37
38
list.forEach(e => e.addEventListener("mouseout", customTooltipMouseOut));
39
40