Tooltip

Search…
Tooltip
How to Register Tooltip Plugin
F2 has modular structure provides best tree-shaking results and package size optimization.
If you just import F2 from '@antv/f2', then it has included tooltip by default. But if you want a better package size optimization, you can register manually:
1
const F2 = require('@antv/f2/lib/core');
2
const Tooltip = require('@antv/f2/lib/plugin/tooltip');
3
// Method 1: Global Registeration
4
F2.Chart.plugins.register(Tooltip); 
5
​
6
// Or Method2: Registeration for a Chart instance
7
const chart = new Chart({
8
  id: 'canvas',
9
  plugins: Tooltip
10
});
Copied!
Tooltip Configuration
Close Tooltip
If you call chart.tooltip(false), tooltip will not be rendered.
Configure Tooltip
Below is the method for configuring tooltip, the detail properties can be found in table.
1
chart.tooltip({
2
  // see detail properties in table
3
});
Copied!
Name
Type
Default
Description
alwaysShow
Boolean
false
Whether the tooltip is still show when the touch area is not in the chart.It can be set to be true to preserve displaying.
offsetX
Number
0
Tooltip offset in x direction.
offsetY
Number
0
Tooltip offset in y direction.
triggerOn
String / Array
[ 'touchstart', 'touchmove' ]
The event that will trigger tooltip. 
triggerOff
String / Array
'touchend'
The event that will hide tooltip.
showTitle
Boolean
false
Wether to show the title.
showCrosshairs
Boolean
​
Wether to show the tooltip crosshairs.  The default value of different charts is different, point, line, area and path will show by default.
crosshairsStyle
Object
​
Style of the crosshairs line, default setting is:
 { 
    stroke: 'rgba(0, 0, 0, 0.25)',     
    lineWidth: 2 
  }
showTooltipMarker
Boolean
true
Wether to display tooltipMarker.
tooltipMarkerStyle
Object
​
Style of the tooltipMarker.
background
Object
​
The background style of tooltip content box. 
titleStyle
Object
​
Style for tooltip's title, invalid if showTitle is false.
nameStyle
Object
​
Style for each tooltip item's name part.
valueStyle
Object
​
Style for each tooltip item's value part.
showItemMarker
Boolean
true
Wether to show the each tooltip item's marker.
itemMarkerStyle
Object
​
Style for each tooltip item's marker.
custom
Boolean
false
Wether to custom the tooltip. See custom tooltip.
onShow
Function
​
Callback when the tooltip show. See callback.
onHide
Function
​
Callback when the tooltip hide. See callback.
onChange
Function
​
Callback when the tooltip content change. See callback.
Tooltip Item Interface
The picture below shows the structure of tooltip content, it includes title and a group of items, each item consists of marker, name and value.
The tooltip items passed to the tooltip onShow , onChange, onHide callbacks implement the following interface:
1
{
2
  // X position of matching tooltip item
3
  x: Number,
4
  
5
  // Y position of matching tooltip item
6
  y: Number,
7
  
8
  // Color of matching tooltip item
9
  color: String,
10
  
11
  // The data of matching tooltip item
12
  origin: Object,
13
  
14
  // The value of the `name` attribute in tooltip item
15
  name: String,
16
  
17
  // The value of the `value` attribute in tooltip item
18
  value: String / Number,
19
  
20
  // The title of current tooltip
21
  title: String
22
  
23
  // The marker of matching tooltip item
24
  marker: Object
25
}
Copied!
onShow callback
We can use onShow callback to change the tooltip's show content. It will trigger when the tooltip is shown.
1
chart.tooltip({
2
  onShow(obj) {}
3
});
4
​
5
// The following is the parameter `Obj` interface
6
{
7
  // X position of current event
8
  x: Number,
9
  
10
  // Y position of current event
11
  y: Number,
12
  
13
  // The tootlip instance
14
  tooltip: Object
15
  
16
  // Tooltip content items
17
  items: Array,
18
  
19
  // The style of tooltipMarker
20
  tooltipMarkerCfg: Object
21
}
Copied!
As following example, we will change the value of name to the value of title, see demo and code here.
1
chart.tooltip({
2
  onShow: function onShow(ev) {
3
    var items = ev.items;
4
    items[0].name = items[0].title;
5
  }
6
});
Copied!
onChange callback
It will trigger when the tooltip's content changed. Usually combined with the custom attribute for custom tooltip.
1
chart.tooltip({
2
  onChange(obj) {}
3
});
4
​
5
// The following is the parameter `Obj` interface
6
{
7
  // X position of current event
8
  x: Number,
9
  
10
  // Y position of current event
11
  y: Number,
12
  
13
  // The tootlip instance
14
  tooltip: Object
15
  
16
  // Tooltip content items
17
  items: Array,
18
  
19
  // The style of tooltipMarker
20
  tooltipMarkerCfg: Object
21
}
Copied!
onHide callback
It will trigger when the tooltip is disappeared. 
1
chart.tooltip({
2
  onHide(obj) {}
3
});
4
​
5
// The following is the parameter `Obj` interface
6
{
7
  // The tootlip instance
8
  tooltip: Object
9
}
Copied!
Custom Tooltip
Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an canvas one or combined with legend.
Combine Legend and Tooltip
On mobile, in order to make better use of the screen size, the tooltip and legend are often combined in the chart design. Like this:
In F2, we can use  a custom tooltip to implement, see demo and code here: 
1
chart.tooltip({
2
    custom: true, // required
3
    onChange(obj) {
4
      var legend = chart.get('legendController').legends.top[0]; // get the top legend instance
5
      var tooltipItems = obj.items;
6
      var legendItems = legend.items;
7
      var map = {};
8
      legendItems.map(function(item) {
9
        map[item.name] = _.clone(item);
10
      });
11
      tooltipItems.map(function(item) {
12
        var name = item.name;
13
        var value = item.value;
14
        if (map[name]) {
15
          map[name].value = value;
16
        }
17
      });
18
      legend.setItems(_.values(map)); // update legend items
19
    },
20
    onHide: function onHide() {
21
      var legend = chart.get('legendController').legends.top[0];
22
      legend.setItems(chart.getLegendItems().country); // revert the original items of the legend
23
    }
24
  });
Copied!
External(HTML) Tooltip
We also can define a html tooltip, like this, see demo and code here:
1
chart.tooltip({
2
  custom: true,
3
  showCrosshairs: false,
4
  onChange: function onChange(ev) {
5
    var tooltipEl = $('.f2-tooltip'); // get the tooltip html element 
6
    var currentData = ev.items[0];
7
    var text = currentData.value;
8
    tooltipEl.html(['<span>' + currentData.origin.date + '</span>', '<span>' + 'Web Visits: <b>' + text + '</b></span>'].join(''));
9
​
10
    tooltipEl.css({
11
      opacity: 1,
12
      left: canvasOffsetLeft + currentData.x - tooltipEl.outerWidth() / 2 + 'px',
13
      top: canvasOffsetTop + currentData.y - tooltipEl.outerHeight() - 15 + 'px'
14
    });
15
  },
16
  onHide: function onHide() {
17
    var tooltipEl = $('.f2-tooltip');
18
    tooltipEl.css({
19
      opacity: 0
20
    });
21
  }
22
});
Copied!
Or Like this, combine with Guide.Html and Tooltip,  see demo and code here:
1
chart.guide().html({
2
  position: ['min', 'max'],
3
  html: '<div id="tooltipWrapper" style="height: 45px;background-color:#E9F1FF;line-height: 45px;">' + '<div id="tooltipName" style="float:left;font-size:12px;color:#2E2E2E;"></div>' + '<div id="tooltipValue" style="float:right;font-size:12px;color:#2E2E2E;"></div>' + '</div>',
4
  offsetY: -22.5
5
});
6
chart.tooltip({
7
  showCrosshairs: true,
8
  custom: true,
9
  onChange: function onChange(obj) {
10
    var items = obj.items;
11
    var originData = items[0].origin;
12
    var date = originData.date;
13
    var value = originData.value;
14
    var tag = originData.tag;
15
​
16
    $('#tooltipWrapper').width($('#mountNode').width());
17
    $('#tooltipWrapper').css('left', 0);
18
    $('#tooltipName').css('margin-left', 15);
19
    $('#tooltipValue').css('margin-right', 15);
20
​
21
    if (tag === 1) {
22
      $('#tooltipName').html(date + '<img style="width:27.5px;vertical-align:middle;margin-left:3px;" src="https://gw.alipayobjects.com/zos/rmsportal/RcgYrLNGIUfTytjjijER.png">');
23
    } else if (tag === 2) {
24
      $('#tooltipName').html(date + '<img style="width:27.5px;vertical-align:middle;margin-left:3px;" src="https://gw.alipayobjects.com/zos/rmsportal/XzNFpOkuSLlmEWUSZErB.png">');
25
    } else {
26
      $('#tooltipName').text(date);
27
    }
28
    var color;
29
    if (value >= 0) {
30
      color = '#FA541C';
31
    } else {
32
      color = '#1CAA3D';
33
    }
34
​
35
    $('#tooltipValue').html('涨幅：<span style="color:' + color + '">' + items[0].value + '</span>');
36
    $('#tooltipWrapper').show();
37
  },
38
  onHide: function onHide() {
39
    $('#tooltipWrapper').hide();
40
  }
41
});
Copied!
More Demos
Demo
demo
​HTML tooltip​
​
​
​showTooltip()​
​
​
​styling​
​
​
​tooltip with title​
​
​
​vertical layout​
​
​