css - 如何将工具提示带到图表顶部

Question

我现在有一个谷歌图表，如下图所示

现在我想将工具提示移动到图表顶部(不关心鼠标的位置)。

我该怎么做。

这是我的代码:

var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'Time');
chartData.addColumn('number', 'Average Score');
chartData.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });

chartData.addRows(data);

var options = {
    chartArea: { left: 0, top: 100, width: "100%", height: "100%" },
    title: '',
    opacity: 100,
    backgroundColor : {fill: '#000'},
    hAxis: {
        textPosition: 'none', 
        titleTextStyle: {color: '#333'},  
        titleTextStyle: {color: '#2902A3'},
    },
    vAxis: {
        textPosition: 'none',
        opacity: 100,
        minValue: 0,
        gridlines: { color: '#0D2B56', count: 10 },
        baselineColor: 'white',
    },
    series:{
        0:{
            color: '#3C93FF',
            areaOpacity: '0.68'
        }
    },
    crosshair: {
        orientation: 'vertical',
        trigger: 'focus',
        color: '#fff'
    },
    legend: 'none',
    tooltip: {isHtml: true},
};


google.load("visualization", "1", { packages: ["corechart"] });
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(chartData, options);

我也使用这个函数来创建工具提示的内容

var createToolTip = function (name, value) {
    return '<div class="googletooltip" ><span>' + name + ':</span><span style="padding-left:20px" >' + value + '</span></div>';
}

还有这种风格

.googletooltip{
    color:#fff;
    border-style: solid;
    border-width: 2px;
    border-color: #3882C4;
    background: #000;
    padding:2px 15px 2px 15px;
    font-weight: bold;
}

非常感谢

Answer 1

尝试为 .googletooltip 类添加一个 top 属性和一个 position 属性。如果没有，如果其他属性不起作用，请尝试使用 margin 属性。解决这三个属性，看看您是否能够向上移动工具提示。让我知道它是否仍然无法正常工作。

.googletooltip{
 color:#fff;
 border-style: solid;
 border-width: 2px;
 border-color: #3882C4;
 background: #000;
 padding:2px 15px 2px 15px;
 font-weight: bold;
 }