CODEWITHSUNDEEP
javascriptjqueryhtmlcssd3.js
anderish
anderish

Reputation: 1759

Using JQuery Show Text On Hover

I have a few graphs that when I hover my mouse over them, they will show some text. First I defined the structure of my text:

<article class="basic_metrics">
    <h2>Basic Metrics</h2>
    <p id="number_of_loans"></p>
    <p id="total_loan_originated"></p>
</article>

With the following css:

.basic_metrics{
    height: 100px;
    width: 100px;
    display: none;
    z-index: 1;
}

As you can see, the display is none. Then I have some JQuery to help me with this function:

          $(document).ready ( function () {
                $(document).on("mouseenter", "svg", function () {
                    console.log("mouse enter");
                    $(this).css("opacity","0.5");

                    $("#number_of_loans").empty().append("Number of Loans: " +10000);
                    $("#total_loan_origination").empty().append("Total loan originated: " + 1000);
                    $(this).append($(".basic_metrics").css("display","block"));


                }).on('mouseleave', 'svg', function () {
                    console.log("mouse leave");
                    $(this).css("opacity", "1");
                });
          });

Then from the inspect menu article does get appended properly to the parent class but nothing shows up.

enter image description here

Take a look around the blue highlight, you will notice the article tag with display: block. I thought it had to do with the z-index but I also added that in but still doesn't work. Any ideas?

EDIT: The graphs are being generated by the D3.js library.

Upvotes: 3

Views: 1617

Answers (1)

freginold
freginold

Reputation: 3956

Remove svg from the event handler arguments and your code works.

Side note: In your article, you have the second paragraph identified as total_loan_originated, but in your JavaScript, it's called total_loan_origination.

Here's a working test fiddle that doesn't append to svg.

Update: The text box isn't being removed properly. This updated fiddle removes it.

Upvotes: 1

Related Questions