Как настроить всплывающую подсказку флота в angularjs?

Есть ли способ изменить всплывающую подсказку флота, выглядящую как изображение ниже (в основном, с стрелкой вниз)?Как настроить всплывающую подсказку флота в angularjs?

enter image description here

Ниже, как я получаю мою подсказку в данный момент.

enter image description here

моей подсказке функция

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; 
};

источник

2014-12-11 abi1964

Вы посмотрели на это: http://getbootstrap.com/javascript/#tooltips Я думаю, вы можете использовать подсказку снизу с указанной высотой – Gokhan

@Gokhan: Спасибо. Выглядит неплохо, но как отключить всплывающую подсказку и использовать это – abi1964

, посмотрите на этот вопрос. Возможно, вместо бутстрапа вы можете попробовать предлагаемые библиотеки http://stackoverflow.com/questions/445482/any-examples-of-flot-with-floating-tooltips – Gokhan

Как я уже сказал в своем комментарии этого уровня настройки не доступен в подсказке плагине, поэтому кода его самостоятельно. Вам даже не нужна загрузка.

CSS для «стрелки» 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; 
}

И добавить plothover событие:

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(); 
    } 
    });

Пример here, продолжение из предыдущих вопросов.

источник

2014-12-11 16:54:20 Mark

Как настроить всплывающую подсказку флота в angularjs?

ответ

Смежные вопросы