I have this code creating a popup/tooltip when specific text is hovered by the user:

   function popup() {
   $('#example').load("example.html");
}

I add this to make the tooltip appear:

<div id="example" onm ouseover="popup(this)" onm ouseout="popup.close();">Hover over this!</div>

What that's doing, I'm happy I succeeded figuring out, is when the user hovers over the text "Hover over this!" a window appears and displays example.html as the content of the popup window. I included onmouseout="popup.close();" in an attempt to get it to automatically close.

I'm trying to get it to also close the popup when the user moves their mouse away from the text. I've tried this:

   function popup() {
   $('#example').load("example.html");
}

   function close(){
   popup(this).close();
}

Which, obviously to those who know more than me, didn't cause the window to close.

How do I have to write a very simple version of this code correctly so it closes the popup onm ouseOut?

I've found this solution that's very similar but I'm not 100% sure how to edit that either to get it loading the external page I want.

Edit: Nope. The solution in the above link didn't work out for me.

Another Edit: 2 (or 3?) people have suggested edits to this post so far. One said it was java but didn't give an answer. Another said it was JavaScript and didn't give an answer. Another said it was J-somethingElse Library and didn't give an answer anywhere near relevant to the content of the question.

I'm not concerned with and didn't ask what kind of code it is I'd like to know how to get the window the code I shared opens to close onm ouseOut and move forward with the project.

CodePudding user response：

I'm not super skilled in JS, so bear with me. It looks like you have a function to display the popup, so I will assume that is working well. I only have a few suggestions, my best one is to have an if/else statement. If the mouse cursor is over the text, display the popup. Else, hide the popup. I don't see a reason why the functions you set up wouldn't be working, so you should just be able to add that. For fear of giving incorrect advice, I will not be showing code because I suck at JS and it will probably be incorrect. But do some research and see if that works. Some other people might have better feedback than me.

CodePudding user response：

First, you have to know the basics of JS. jQuery is its library/framework, written by an enthusiastic programmers like you. At first, JavaScript.

      <div onm ouseover="this.innerText='7'" 
       onm ouseout="this.innerText='77'">Hover please!</div> 

On mousing over it, the text is 7, on mouse out it is 77 . This is basic.

And the language is not Java.

JavaScript is easier a little bit.

This is what you got to know now.