javascript - 无法将工具提示 header 样式化为 'pull-left'

Question

对于以下饼图，我有一个以表格格式构建并在悬停事件上显示的工具提示。

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
  $scope.options = {
        chart: {
            type: 'pieChart',
            height: 500,
            x: function(d){return d.key;},
            y: function(d){return d.y;},
            noData: '0 incidents',
            color:['#CE1B1F', '#FFC455', '#00A6CD'],
            showLabels: false,
            duration: 500,
            labelThreshold: 0.01,
            labelSunbeamLayout: true,
            legend: {
                margin: {
                    top: 5,
                    right: 35,
                    bottom: 5,
                    left: 0
                }
            },
            tooltip: {
            contentGenerator: function (e) {
              var series = e.series[0];
              if (series.value === null) return;

              var header = 
                "<thead>" + 
                  "<tr>" +
                    "<td class='legend-color-guide'><div style='background-color: " + series.color + ";'></div></td>" +
                    "<td class='key'><strong>" + series.key + "</strong></td>" +
                  "</tr>" + 
                "</thead>";

              var rows = 
                "<tr>" +
                  "<td class='key'>" + series.key + '- #3: ' + "</td>" +
                  "<td class='x-value'>" + e.data.MyAttribute1 + "</td>" + 
                "</tr>" +
                "<tr>" +
                  "<td class='key'>" + series.key + '- #5: ' + "</td>" +
                  "<td class='x-value'>" + e.data.MyAttribute2 + "</td>" + 
                "</tr>";

              return "<table>" +
                  header +
                  "<tbody>" + 
                    rows + 
                  "</tbody>" +
                "</table>";
            } 
          }                

        }
    };

    $scope.data = [
        {
            key: "CAT I",
            y: 2,
            MyAttribute1:"DLA Avn ... CAT I",
            MyAttribute2:"DLA Energy ... CAT I"
        },
        {
            key: "CAT II",
            y: 1,
            MyAttribute1:"DLA Avn ... CAT II",
            MyAttribute2:"DLA Energy ... CAT II"
        },
        {
            key: "CAT III",
            y: 3,
            MyAttribute1:"DLA Avn ... CAT III",
            MyAttribute2:"DLA Energy ... CAT III"
        },
    ];
});

我无法使工具提示标题 (series.key) 直接对齐到 series.color 属性的右侧。现在它显示在中心。我尝试注入(inject)一个 pull-left 和一个 float left，但它没有改变任何东西。

这是一个向您展示该工具提示的 plunkr: http://plnkr.co/edit/2SFzP96OIRyGhtM3j5Cp?p=preview

Answer 1

工具提示由表格组成，所以发生的事情是这样的:

----------------------
Color        | CAT 1
----------------------
CAT III- #3: |         
----------------------

尝试移动 <strong>" + series.key + "</strong>像这样在 div 之后进入它上面的表格行:

<td colspan="2" class='legend-color-guide'><div style='background-color: " + series.color + ";'></div><strong>" + series.key + "</strong></td>

然后删除<td class='key'><strong>" + series.key + "</strong></td>

这将允许您按照自己的方式设置样式。重要的部分是 colspan="2"

供引用: http://www.w3schools.com/tags/att_td_colspan.asp

              var header = 
                "<thead>" + 
                  "<tr>" +
                    "<td colspan='2' class='legend-color-guide'><div style='background-color: " + series.color + ";'><strong>" + series.key + "</strong></div></td>" +
                  "</tr>" + 
                "</thead>";