Check documentation for the latest version 6.0 of dhtmlxSuite Tooltips DHTMLX Docs

Tooltips

Usually it's necessary to show additional information about chart items. It is possible to set labels for this purpose. However, if a text is rather long, you can use tooltips.

Tooltips are defined by the 'tooltip' property. You need to define a template for the tooltip in the following way:

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    tooltip:"#details#"   });

Also it is possible to set the tooltip position - an offset from the mouse cursor position (by default, top offset is 0, left is 20)

var chart =  new dhtmlXChart({
    view:"bar",
    container:"chart_container",
    value:"#sales#",
    tooltip:{
        template:"#details#",
        dx:10,
        dy:5
    }
});

Tooltip style

The style of tooltip can be defined right in the template:

var chart =  new dhtmlXChart({
    ...
    tooltip:"<span style='color:#293CD6'>#details#</span>"
});

Also you may define the dhx_tooltip CSS class:

.dhx_tooltip{
    font-family:Tahoma;
    font-size:8pt;
    background-color:white;
    padding:2px 2px 2px 2px;
    border:1px solid #A4BED4;
}
Back to top