Using JQuery Show Text On Hover
I have several graphs that when I hover my mouse over them, they 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 shows none
. Then I have 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 the article
parent class is correctly added from the validation menu , but nothing is displayed.
Take a look at the blue highlight, you will see the tag article
display: block
. I thought it had something to do with the z index, but I also added that it still doesn't work. Any ideas?
EDIT: Graphs are generated by the D3.js library .
source to share
Remove the svg
event handler from the arguments and your code works.
Side note. In yours article
, you have a second paragraph labeled as total_loan_originated
, but in your JavaScript it's called total_loan_origination
.
Here's a working test script that isn't appended to svg
.
Update: The textbox is not being removed as expected. This updated script removes it.
source to share