Tooltip plothover erscheint nicht auf modal

Question

Ich benutze flot Chart-Bibliothek, um ein Diagramm in einem modalen Fenster zu zeigen.Es funktioniert gut, aber das Tooltip Popover erscheint nicht, wenn ich plothover.

Hier ist meine Js-Code: $ (document) .auf ('klicken', 'a [daten target = "# evolutieProdus"]', function() {

var route = 'http://www.fabricademagie.ro/metronic/comenzi/returnOrdersYear'; 
    var productcode = $(this).data('productcode'); 
    var productid = $(this).data('productid'); 
    var data = { 
     'productcode': productcode, 
     'productid': productid 
    }; 

    $.post(route,data,function(response){ 

     response = jQuery.parseJSON(response); 
     //console.log(response); 

     var obj = response.an ; 
     var an_prezent = Object.keys(obj).map(function(e){ 
      return [Number(e), obj[e]]; 
     }); 

     var obj2 = response.precedent ; 
     var an_precedent = Object.keys(obj2).map(function(e){ 
      return [Number(e), obj2[e]]; 
     }); 

     var obj3 = response.second ; 
     var an_secund = Object.keys(obj3).map(function(e){ 
      return [Number(e), obj3[e]]; 
     }); 

     function showChartTooltip(x, y, xValue, yValue, color) { 
      var _item = $('<div id="tooltip" class="chart-tooltip2">' + yValue + '<\/div>').css({ 
       position: 'absolute', 
       display: 'none', 
       top: y, 
       left: x, 
       border: '0px solid #ccc',    
       padding: '2px 6px', 
       'color' : color, 
       'border' : '1px solid #000', 
       'background-color': '#CCC !important' 
      }).appendTo("#evolutieProdus").fadeIn(300); 
      _item.css('left',x - (_item.width() - -20)); 
     } 

     if ($('#chart_2').size() != 0) { 
      //$('#orders_year_loading').hide(); 
      //$('#orders_year_content').show(); 
     var plot_statistics = $.plot($("#chart_2"), 
      [{ 
       data: an_prezent, 
       lines: { 
        show: true, 
        fill: false, 
        lineWidth: 5 
       }, 
       color: '#D91E18', 
       shadowSize: 0, 
       label: " Anul <?=date('Y');?>" 
      },{ 
       data: an_prezent, 
       points: { 
        show: true, 
        fill: true, 
        radius: 7, 
        fillColor: "#D91E18", 
        lineWidth: 5 
       }, 
       color: '#fff', 
       shadowSize: 1 
      },{ 
       data: an_precedent, 
       lines: { 
        show: true, 
        fill: false, 
        lineWidth: 3 
       }, 
       color: '#00BCD4', 
       shadowSize: 0, 
       label: " Anul <?=date('Y') - 1;?>" 
      },{ 
       data: an_precedent, 
       points: { 
        show: true, 
        fill: true, 
        radius: 5, 
        fillColor: "#00BCD4", 
        lineWidth: 3 
       }, 
       color: '#fff', 
       shadowSize: 1 
      },{ 
       data: an_secund, 
       lines: { 
        show: true, 
        fill: false, 
        lineWidth: 3 
       }, 
       color: '#FF9800', 
       shadowSize: 0, 
       label: " Anul <?=date('Y') - 2;?>" 
      },{ 
       data: an_secund, 
       points: { 
        show: true, 
        fill: true, 
        radius: 5, 
        fillColor: "#FF9800", 
        lineWidth: 3 
       }, 
       color: '#fff', 
       shadowSize: 1 
      }], 
      { 
       xaxis: { 
        tickLength: 0, 
        tickDecimals: 0, 
        mode: "categories", 
        min: 0, 
        font: { 
         lineHeight: 34, 
         style: "normal", 
         variant: "small-caps", 
         color: "#FF5722" 
        } 
       }, 
       yaxis: { 
        ticks: 5, 
        tickDecimals: 0, 
        tickColor: "#eee", 
        font: { 
         lineHeight: 34, 
         style: "normal", 
         variant: "small-caps", 
         color: "#6F7B8A" 
        } 
       }, 
       grid: { 
        hoverable: true, 
        borderWidth: 0, 
        margin: 5 
       } 
      }); 
      var previousPoint = null; 
       $("#chart_2").bind("plothover", function (event, pos, item) { 
       $("#x").text(pos.x.toFixed(2)); 
       $("#y").text(pos.y.toFixed(2)); 
       if (item) { 
        if (previousPoint != item.dataIndex) { 
         previousPoint = item.dataIndex; 

         $("#tooltip").remove(); 
         var x = item.datapoint[0].toFixed(2), 
          y = item.datapoint[1].toFixed(2); 

         var _color = "#212121"; 
         if(item.series.points.fillColor !== undefined && item.series.points.fillColor !== null && item.series.points.fillColor.length){_color = item.series.points.fillColor;}  

         showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' Bucati vandute',_color); 
        } 
       } else { 
        $("#tooltip").remove(); 
        previousPoint = null; 
       } 
      }); 
     } 
    });    
}); 

Answer 1

Ich finde Die Lösung.Ich setze eine Z-Index-Eigenschaft auf meine Tooltip-Klasse.