Using JQuery Show Text On Hover

Question

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.

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.

try changing the position, may be it is on the screen somewhere — tech2017
– tech2017, Commented Jul 19, 2017 at 14:09
Have you tried using an ID for the article instead of a class? Just wondering if it's confused by the possibility of appending a list of class elements rather than just 1 element. — freginold
– freginold, Commented Jul 19, 2017 at 14:11
Just tried changing the position. Still no where to be found. I generated these graphs using d3.js btw. — anderish
– anderish, Commented Jul 19, 2017 at 14:19

freginold · Accepted Answer · 2017-07-19 14:40:28Z

1

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.

edited Jul 19, 2017 at 14:40

answered Jul 19, 2017 at 14:15

freginold

3,9603 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

anderish Over a year ago

Still doesn't work. Does it help that these graphs are being generated by the d3.js library?

freginold Over a year ago

That might have something to do with it. If you take out the "svg" reference, it looks like it works. I'm mocking up a fiddle right now.

freginold Over a year ago

@anderish Take a look at this fiddle... If you remove the svg arguments from the event handlers, the text shows up as expected.

anderish Over a year ago

Yep you're right, I am not appending to svg now and it works. Do you want to write an answer so I can mark it as correct?

Collectives™ on Stack Overflow

Using JQuery Show Text On Hover

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related