G2 - 自定义 html 的 tooltip

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>自定义 html 的 tooltip</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <style type="text/css">
  .ac-tooltip{
    position:absolute;
    visibility:hidden;
    border : 1px solid #efefef;
    background-color: white;
    opacity: .8;
    padding: 5px 15px;

    transition: top 200ms,left 200ms;
    -moz-transition:  top 200ms,left 200ms;  /* Firefox 4 */
    -webkit-transition:  top 200ms,left 200ms; /* Safari 和 Chrome */
    -o-transition:  top 200ms,left 200ms;
  }

 .custom-table {
    margin: 10px;
 }

 .custom-table td{
    border: 1px solid #cdcdcd;
    padding: 5px 8px;
 }
</style>

<script>
var data = [
  {"month":0,"tem":7,"city":"tokyo"},
  {"month":1,"tem":6.9,"city":"tokyo"},
  {"month":2,"tem":9.5,"city":"tokyo"},
  {"month":3,"tem":14.5,"city":"tokyo"},
  {"month":4,"tem":18.2,"city":"tokyo"},
  {"month":5,"tem":21.5,"city":"tokyo"},
  {"month":6,"tem":25.2,"city":"tokyo"},
  {"month":7,"tem":26.5,"city":"tokyo"},
  {"month":8,"tem":23.3,"city":"tokyo"},
  {"month":9,"tem":18.3,"city":"tokyo"},
  {"month":10,"tem":13.9,"city":"tokyo"}
];
var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450
});
var defs = {'month':{
  type: 'cat',
  values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
}};
chart.source(data,defs);
chart.tooltip(true,{ // 第一个参数是控制是否显示tooltip，可以设置为false，不显示tooltip
  custom: true,
  html:  '<div class="ac-tooltip" style="position:absolute;visibility: hidden;"><p class="ac-title"></p><table class="ac-list custom-table"></table></div>', // tooltip的外层模板
  itemTpl: '<tr><td style="color:{color}">{name}</td><td>{value}</td></tr>', // 支持的字段 index,color,name,value
  offset: 50
});
chart.line().position('month*tem');
chart.render();
</script>

<p>
      </body>
    </html>
          

自定义 html 的 tooltip

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>自定义 html 的 tooltip</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const Chart = createG2(chart => {
      chart.col('month', {
        type: 'cat',
        values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
      });
      chart.tooltip(true,{ // 第一个参数是控制是否显示tooltip，可以设置为false，不显示tooltip
        custom: true,
        html:  '<div class="ac-tooltip" style="position:absolute;visibility: hidden;"><p class="ac-title"></p><table class="ac-list custom-table"></table></div>', // tooltip的外层模板
        itemTpl: '<tr><td style="color:{color}">{name}</td><td>{value}</td></tr>', // 支持的字段 index,color,name,value
        offset: 50
      });
      chart.line().position('month*tem');
      chart.render();
    });
    const MyComponent = React.createClass({
      getInitialState() {
        return {
          data: [
            {"month":0,"tem":7,"city":"tokyo"},
            {"month":1,"tem":6.9,"city":"tokyo"},
            {"month":2,"tem":9.5,"city":"tokyo"},
            {"month":3,"tem":14.5,"city":"tokyo"},
            {"month":4,"tem":18.2,"city":"tokyo"},
            {"month":5,"tem":21.5,"city":"tokyo"},
            {"month":6,"tem":25.2,"city":"tokyo"},
            {"month":7,"tem":26.5,"city":"tokyo"},
            {"month":8,"tem":23.3,"city":"tokyo"},
            {"month":9,"tem":18.3,"city":"tokyo"},
            {"month":10,"tem":13.9,"city":"tokyo"}
          ],
          forceFit: true,
          height: 450
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              plotCfg={this.state.plotCfg}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script></p>
<div>
<style type="text/css">
    .ac-tooltip{
      position:absolute;
      visibility:hidden;
      border : 1px solid #efefef;
      background-color: white;
      opacity: .8;
      padding: 5px 15px;

transition: top 200ms,left 200ms;
      -moz-transition:  top 200ms,left 200ms;  /* Firefox 4 */
      -webkit-transition:  top 200ms,left 200ms; /* Safari 和 Chrome */
      -o-transition:  top 200ms,left 200ms;
    }

.custom-table {
      margin: 10px;
   }

.custom-table td{
      border: 1px solid #cdcdcd;
      padding: 5px 8px;
   }
</style>
</div>

</body>
    </html>