'How do I write OnMouseOut so it closes a popup tooltip?

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" onmouseover="popup(this)" onmouseout="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 onMouseOut?

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.

javascripthtmljquery


Solution 1:[1]

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.

Solution 2:[2]

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 onmouseover="this.innerText='7'" 
       onmouseout="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.

Solution 3:[3]

The first thing here you have to know is HTML on the web. Then you get to JavaScript (basically without jQuery at first ).

You were using the jQuery library ajax methods of JavaScript .

     <!--normal code (it's a comment!)-->    
       <script>function getLoad(){return '<iframe src="example.html"/>' }</script>

      (return means give out value). 
  <div onmouseover="this.innerHTML=getLoad()" onmouseout="this.innerHTML='Hover please!'">Hover please! 
  </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nebula49dev
Solution 2 JavaScript
Solution 3 user19133145

Related Questions