javascript - 当高度较小时，如何正确显示高脚椅的工具提示？

Question

我在网格表(ui-grid)中使用高脚椅，单元格高度20px

如何正确显示工具提示？

这是我的DEMO

<小时/>

我的代码:

$(function() {
  Highcharts.setOptions({ // This is for all plots, change Date axis to local timezone
    global: {
      useUTC: false
    }
  });

  var chart = new Highcharts.Chart({

    chart: {
      type: 'bar',
      width:160,
      height:20,
      renderTo: 'container',
      margin: [0, 0, 0, 0],
      backgroundColor: 'transparent'
    },
    title: {
      text: ''
    },
    credits: {
      enabled: false
    },
    xAxis: {
      labels: {
        enabled: false
      }
    },
    yAxis: {
      //max: 1,
      maxPadding: 0,
      minPadding: 0,
      gridLineWidth: 0,
      endOnTick: false,
      labels: {
        enabled: false
      }
    },
    legend: {
      enabled: false
    },
    tooltip: {   
                                    //enabled: false,
                                    formatter: function () {
                                       return '<b>' + this.series.name + '</b>: ' +  this.point.y
                                   } ,
                                   //positioner: function(boxWidth, boxHeight, point) {
                                   //     return {x:point.plotX,y:point.plotY-20};
                                   // }
                               },
    plotOptions: {
      series: {
      borderWidth: 0,
      //pointHeight:20,
                            stacking: 'normal',
                            states:{
                              hover:false
                            },
        //enableMouseTracking: false,
        lineWidth: 1,
        shadow: false,
        states: {
          hover: {
            lineWidth: 1
          }
        },
        animation: false
      }
    },
    series: [
      {
        "name": "Open",
        "nameStr": "Open",
        "id": "open",
        "data": [
          {
            "extras": {},
            "y": 1,
            "color": "#c44a53"
          }
        ]
      },
      {
        "name": "In Progress",
        "nameStr": "In Progress",
        "id": "in progress",
        "data": [
          {
            "extras": {},
            "y": 0,
            "color": "#71dedf"
          }
        ]
      },
      {
        "name": "Almost Done",
        "nameStr": "Almost Done",
        "id": "almost done",
        "data": [
          {
            "extras": {},
            "y": 0,
            "color": "#5dcfd0"
          }
        ]
      },
      {
        "name": "Done",
        "nameStr": "Done",
        "id": "done",
        "data": [
          {
            "extras": {},
            "y": 0,
            "color": "#47b9c7"
          }
        ]
      },
      {
        "name": "Closed",
        "nameStr": "Closed",
        "id": "closed",
        "data": [
          {
            "extras": {},
            "y": 0,
            "color": "#a7b75b"
          }
        ]
      },
      {
        "name": "On Hold",
        "nameStr": "On Hold",
        "id": "on hold",
        "data": [
          {
            "extras": {},
            "y": 0,
            "color": "#eaeaea"
          }
        ]
      }
    ]

  });
});

Answer 1

您可以设置工具提示文本元素和其他项目的样式以使其更小。什么时候变得不可读取决于您的用户测试。像这样的东西:

tooltip: {
  formatter: function() {
    return '<b>' + this.series.name + '</b>: ' + this.point.y
  },
  style: {
    "color": "#333333",
    "cursor": "default",
    "fontSize": "10px", //default is 12px
    "padding": "1px", //default is 8px
    "pointerEvents": "none",
    "whiteSpace": "nowrap"
  }
},

这里我将 padding 设置为 1px，将 fontSize 设置为 10px。