如何在angularjs中自定义Flot工具提示？

Question

Is there a way to change flot tooltip look something like below image (mainly shape with arrow pointing down)?

Below is how I get my tooltip currently.

my tooltip function

var translateDateTooltip = function(value) {
    if (value == null || value == undefined)
        return value;
    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
    var myDate = new Date( value );
    return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " "+myDate.getFullYear();
}

var toolTipContent = function(label, x, y, z) {
    // format the content of tooltip
    // "%s | Date: %x | Count: %y"
    var str = "";
    if (label == "Volume") {
        str = label+" | Date: "+translateDateTooltip(parseInt(x))+" | Volume Count: "+y;
    } else
        str = label+" | Date: "+translateDateTooltip(parseInt(x))+" | Count: "+y;
    return str;
};

Answer 1

As I said in my comment this level of customization is not available in the tooltip plugin, so code it yourself. You don't even really need bootstrap.

CSS for an "arrowed" tooltip .

.tooltip {
      display: none;
      position: absolute;
      width: 100px;
      height: 20px;
      line-height: 20px;
      padding: 10px;
      font-size: 14px;
      text-align: center;
      color: rgb(113, 157, 171);
      background: rgb(255, 255, 255);
      border: 4px solid rgb(255, 255, 255);
      border-radius: 5px;
      text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
      box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
}

.tooltip:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: #FFFFFF transparent transparent transparent;
      top: 44px;
      left: 50px;
}

And add a plothover event:

plotArea.bind("plothover", function(event, pos, item) {
    var tip = $('.tooltip');
    if (item) {
      var offset = plot.getPlotOffset();
      var axis = plot.getAxes();
      var yValue = item.datapoint[1];
      var xValue = item.datapoint[0];
      tip.css('left', axis.xaxis.p2c(xValue));
      tip.css('top', axis.yaxis.p2c(yValue) + 20);
      tip.html(yValue.toFixed(0) + ' tasks used');
      tip.show();
    } else {
      tip.hide();
    }
  });

Example here , continued from your previous questions.