G2 - 自定义样式的 tooltip

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>自定义样式的 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 #999;
    border-radius: 5px;
    background-color: white;
    opacity: .8;
    padding: 20px;
    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;
  }
  .ac-tooltip .ac-title{
    margin: 0;
    padding: 5px 0;
  }
  .ac-tooltip .ac-list{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ac-tooltip li{
    line-height:  22px;
  }
</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"},
  {"month":11,"tem":9.6,"city":"tokyo"},
  {"month":0,"tem":-0.2,"city":"newYork"},
  {"month":1,"tem":0.8,"city":"newYork"},
  {"month":2,"tem":5.7,"city":"newYork"},
  {"month":3,"tem":11.3,"city":"newYork"},
  {"month":4,"tem":17,"city":"newYork"},
  {"month":5,"tem":22,"city":"newYork"},
  {"month":6,"tem":24.8,"city":"newYork"},
  {"month":7,"tem":24.1,"city":"newYork"},
  {"month":8,"tem":20.1,"city":"newYork"},
  {"month":9,"tem":14.1,"city":"newYork"},
  {"month":10,"tem":8.6,"city":"newYork"},
  {"month":11,"tem":2.5,"city":"newYork"},
  {"month":0,"tem":-0.9,"city":"berlin"},
  {"month":1,"tem":0.6,"city":"berlin"},
  {"month":2,"tem":3.5,"city":"berlin"},
  {"month":3,"tem":8.4,"city":"berlin"},
  {"month":4,"tem":13.5,"city":"berlin"},
  {"month":5,"tem":17,"city":"berlin"},
  {"month":6,"tem":18.6,"city":"berlin"},
  {"month":7,"tem":17.9,"city":"berlin"},
  {"month":8,"tem":14.3,"city":"berlin"},
  {"month":9,"tem":9,"city":"berlin"},
  {"month":10,"tem":3.9,"city":"berlin"},
  {"month":11,"tem":1,"city":"berlin"}
];
var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450
});
var defs = {'month':{
  type: 'cat',
  values: [
    '一月','二月','三月','四月','五月','六月',
    '七月','八月','九月','十月','十一月','十二月']
}};
chart.source(data,defs);
chart.tooltip(true, {
  custom: true, // 使用自定义的 tooltip
  offset: 50
});
chart.line().position('month*tem').color('city');
chart.render();
</script>


      </body>
    </html>
          

自定义样式的 tooltip

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>自定义样式的 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, {
        custom: true, // 使用自定义的 tooltip
        offset: 50
      });
      chart.line().position('month*tem').color('city');
      chart.render();
    });

<div>
  <style type="text/css">
    .ac-tooltip{
      position:absolute;
      visibility:hidden;
      border : 1px solid #999;
      border-radius: 5px;
      background-color: white;
      opacity: .8;
      padding: 20px;
      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;
    }
    .ac-tooltip .ac-title{
      margin: 0;
      padding: 5px 0;
    }
    .ac-tooltip .ac-list{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .ac-tooltip li{
      line-height:  22px;
    }
  </style>

</div>

</body>
    </html>