nvd3 angularjs固定工具提示

Question

我正在尝试修复图形，但工具提示没有修复，并且工具提示开始在窗口周围浮动时出现奇怪的行为。

我试图把nvd3.css放在固定的位置，但是没有用：

.nvtooltip {
    **position: fixed;**
    background-color: rgba(255,255,255,1.0);
    padding: 1px;
    border: 1px solid rgba(0,0,0,.2);
    z-index: 10000;
    font-family: Arial;
    font-size: 13px;
    text-align: left;
    pointer-events: none;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

有什么建议？

Answer 1

尝试使用fixedTop模型的nv.models.tooltip选项。这是在interactiveLayer图表选项内。所以，你可以这样设置：

nv.addGraph(function() {
    var chart = nv.models.lineChart()
        .useInteractiveGuideline(true) //required                      
        ...

    //shoud be separated
    chart.interactiveLayer.tooltip.fixedTop(100) //fixed distance from top  

    ...
})

这是一个demo

---

额外的tooltip选项（来源）：

content = null    //HTML contents of the tooltip.  If null, the content is generated via the data variable.
data = null     // Tooltip data. If data is given in the proper format, a consistent tooltip is generated.
gravity = 'w'   //Can be 'n','s','e','w'. Determines how tooltip is positioned.
distance = 50   //Distance to offset tooltip from the mouse location.
snapDistance = 25   //Tolerance allowed before tooltip is moved from its current position (creates 'snapping' effect)
fixedTop = null //If not null, this fixes the top position of the tooltip.
classes = null  //Attaches additional CSS classes to the tooltip DIV that is created.
chartContainer = null   //Parent DIV, of the SVG Container that holds the chart.
tooltipElem = null  //actual DOM element representing the tooltip.
position = {left: null, top: null}      //Relative position of the tooltip inside chartContainer.
enabled = true  //True -> tooltips are rendered. False -> don't render tooltips.