// Code for rendering a bar chart var data = [ { x: 1, y: 5 }, { x: 2, y: 8 }, { x: 3, y: 7 } ]; var xScale = new Plottable.Scales.Category(); var yScale = new Plottable.Scales.Linear(); var plot = new Plottable.Plots.Line() .x(function(d) { return d.x; }, xScale) .y(function(d) { return d.y; }, yScale) .addDataset(new Plottable.Dataset(data)) .renderTo("svg#example"); // Initializing tooltip anchor var tooltipAnchorSelection = plot.foreground().append("circle").attr({ r: 3, opacity: 0 }); var tooltipAnchor = $(tooltipAnchorSelection.node()); tooltipAnchor.tooltip({ animation: false, container: "body", placement: "auto", title: "text", trigger: "manual" }); // Setup Interaction.Pointer var pointer = new Plottable.Interactions.Pointer(); pointer.onPointerMove(function(p) { var closest = plot.entityNearest(p); if (closest) { tooltipAnchor.attr({ cx: closest.position.x, cy: closest.position.y, "data-original-title": "Value: " + closest.datum.y }); tooltipAnchor.tooltip("show"); } }); pointer.onPointerExit(function() { tooltipAnchor.tooltip("hide"); }); pointer.attachTo(plot);
.tooltip { /* keep tooltips from blocking interactions */ pointer-events: none; }