Modal does not display the plothover tooltip

I am utilizing the flot Chart library to display a graph within a modal window. Everything is functioning properly except for the Tooltip popover not appearing when I hover over the plot.

Below is my JavaScript code: $(document).on('click','a[data-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

After some investigating, I discovered the solution. By adding a z-index property to my tooltip class, the issue was resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Present location of current page

I utilize angularJS to create a web page with the utilization of ngView for a single page and multiview. Is there a way to display the current page's location, such as Home/abc/dcv? On this website https://docs.angularjs.org/guide/, the page location ...

Filtering data in a table using Vue.js on the client side

I am facing an issue with filtering a table containing student details retrieved from a database using v-for. I am attempting to filter the table based on a specific field value. To begin with, I have three input fields located above the table, each bound ...

What is the best way to render a view, hide parameters from the URL, and pass data simultaneously?

In order to display the current view: statVars["sessions"] = userSessions; res.render("statsSessions", statVars); Nevertheless, I must find a way to hide the URL parameters from showing up in the browser's address bar (these parameters are sourced ...

Setting up a specific print media query for the body element through JavaScript

I'm facing an issue with my web page that has a bootstrap modal which pops up when a button is clicked. I've added a print media query to print the content of the modal, but it's causing a problem. When I include the media query in the CSS, ...

Error encountered while invoking web server method in C# through ajax resulting in a 500 Internal Server Error

Occasionally encountering a 500 internal server error when calling a server method from an AJAX request has left me perplexed. The inconsistency of the issue, sometimes working fine and sometimes not, is baffling. To add to the confusion, no changes were m ...

The express.js GET method is unable to retrieve the value of req.body

I have experience working with Vue3, Vuex, Express.js, and MySQL. In the code snippet below, when I use the router get method, I noticed that calling "console.log(req.body)" displays "[object Object]", and calling "console.log(req.body.userid)" shows "unde ...

Entering a value into an HTML textbox using Awesomium in VB.NET

This code snippet is used to split text from a listbox: For Each Item As Object In ListBox1.SelectedItems TextBox2.AppendText(Item.ToString + Environment.NewLine) Next Dim str As String = TextBox2.Text D ...

Development of client and server using socket.io in node.js

I am trying to set up a basic demo using socket.io from http://socket.io The server (app.js) is functioning properly. However, I am encountering issues with the client side: <script src="/socket.io/socket.io.js"></script> <script ...

How can Ext JS 4 handle the transmission of multiple metaData to support multiple dynamic grids by utilizing a single JSON file?

Looking to create multiple grids on a single panel using an accordion layout? I'll be dynamically generating all the grids based on metaData in JSON and handling metachange listener events on my store to reconfigure the grid. But here's the quest ...

Using Sequelize to Include Model Without Specifying Table Name

I am new to Sequelize I am facing an issue with "Nested Eager Loading" I have 2 tables with a one-to-many relationship Comment Table User Table This is the code I am using for the query Comment.findAll({ include: [User] }) The result I got was ...

Error encountered: jquery form validation fails to register changes

I am currently developing a calculator-like code where users will submit a form multiple times, and I need to save the result of calculations only if there are changes in the form. For instance, when a user clicks the "Calculate" button for the first time, ...

Press a button to link a click event handler to another button

function example() {console.log('example');} $('#button1').click(function(){ $('#button2').onclick = example(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> ...

The canvas appears blank when using Firefox version 36

The application is made up of an interface (html) and workspace (canvas). We utilize three.js to create elements on the canvas. So far, it's been functioning perfectly on Chrome, Opera, and Firefox 35. You can see it in action here: However, in Firef ...

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...

Is there a way to replicate table cells in the style of Excel using jQuery?

Excel has a convenient feature that allows cells to be copied by dragging and dropping with the mouse. This same functionality is also available in Google Spreadsheets. I am trying to understand how Google has implemented this feature using JavaScript cod ...

The object in three.js disappears from the scene but remains visible

I am attempting to showcase text as a sprite in three.js and aim to move the sprite along with an object. I achieve this by utilizing a canvas to generate a texture, which is then mapped using SpriteMaterial to create a sprite from it. However, when I remo ...

The function ng-click does not successfully uncheck ion-radio

In the process of developing my application using the ionic framework, I encountered a challenge where I needed to deselect an ion-radio button when clicking on an input tag. Despite attempting to achieve this functionality through this ionic play link, I ...

Why isn't my div displaying in JavaScript?

Currently working on a project for the Odin Project front-end web development. My task involves creating a grid using javascript/jQuery. I attempted to use the createElement method but have encountered an issue in making the div visible within the html. Am ...

What is the best method for passing parameters from HTML to AJAX within code?

My project involves working with Flask, HTML, and Ajax. Here is the HTML code snippet: <script type=text/javascript> $(function() { $('a#calculate').bind('click', function() { $.getJSON('/_add_numbers&ap ...

The system encountered an error stating that the required component "Footer" in the main directory was not located in the specified node_modules

Issue I'm Facing: Error found in components/main/Footer within the file path: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue Components Tree as shown in the screenshot below: https ...