Onmouseover causes .load(external_file.html)?

For an example of what I’m trying to do please see this page and hover over Workman’s Poultice, Fish Glue, or the 3rd one listed in the green table.

The way I have the popups working on the live site linked above now is CSS only which requires the code that loads in the popup to be in the html file it self.

I’m going to have hundreds of these popups so I’d like to clean the code up a bit by using jQuery to load the popup content from an external html file instead of having all of the code in one file.

I’m new writing my own java so I’m struggling to write the code. Here’s the code I have that’s not working:

The script:

   function popup {
   $('#name').load("thefile.html");

}

How I’m trying to load it in the html:

<div id="name" onmouseover="popup(this)">Text to hover</div>

The result I want is, in the above example code, when a viewer hovers over “Text to hover” a tooltip popup window appears and loads thefile.html inside of the popup window.
Edit: When user moves mouse away from target text window closes.

Current code behavior:
Doesn’t work. Window opens but never closes.

What am I doing wrong?

I would suggest you go through the freeCodeCamp JS curriculum to learn JS. Anyway, you are missing the parentheses.

function someFunctionName() {
  // ...code
}

I would use an object of objects for the text. Then you can add an id to the element that is the same as the object id and use it to select the text. Construct the tooltip in the JS and add the text from the object to it.

const tootips = {
  someID1: {
    tooltipText: 'Some text'
  },
    someID2: {
    tooltipText: 'Some text'
  }
}

Example

1 Like

Thank you for your time and effort, lasjorg!

I’ve started going through the java tutorials on this site. I haven’t gotten far enough in to the challenges to actually know anything.

The parenthesis is what I was missing. Thanks!!!
That causes it to open as I want to. How do I get the tooltip to close OnMouseOut?

	function close() {
	onmouseout.close();
	}

^same guess at it my first one was^
and doesn’t work.

mouseout is the event you attach the handler function to that should run when the event fires. Just like you did it with onmouseover.

Honestly, it just seems like a bad idea to do it this way. I tried it briefly but it was just super janky.


Also, please stop calling JavaScript Java it is not the same language at all and it’s slightly triggering me that you keep calling it Java, lol. Call it JS if you need to shorten it. :wink:

1 Like

I don’t know what a handler function is.

I didn’t ask or deserve being insulted, nor did I ask for an opinion. I asked for help with code. It’s even more insulting that an admin gave a like to a user insulting another user. That makes a person feel welcome here.

I don’t think that is the intention. It’s a common practice to know that Java and JavaScript are different languages.

A handler function is a function that runs when the event is triggered. We call it a handler because it handles (or responds to) the event. popup is a handler function.

I don’t see where I insulted you? I asked you to stop calling JavaScript Java as they are two different languages. It’s like if you asked me to make you Pasta when you really wanted Pizza, it is two different foods. You can’t just change the name.

I’m also just letting you know I think this is a bad approach to take to solve this problem.

It’s common practice to those who know java/javascript/jQuery. Not to those who don’t know the difference. I don’t know the difference.

As you were ‘triggered’ by me calling this form of code java because I don’t know the difference - it’s all java to me - I was insulted by

A peeve of mine is triggered when people abbreviate and shorten words, because it’s too much work for them to type a few more letters. The proper way to abbreviate things is LT (Like This).

Please share a link that explains the difference or explain the difference so I know. I’d like to learn the difference.

Why not? LOL
Newer generations have been changing the meaning of words now for about the last 10 years instead of looking at a dictionary.

Example: Popup windows and tooltips are now being called “Modals”. The definition of the word Modal has absolutely nothing to do with a popup window or a tooltip. Noobs just changed the meaning of the word Modal to fit what they wanted it to mean.

Epic now means “exciting” and has nothing to do with a poem is another example. Noobs changed what Epic means to fit what they wanted it to.

Yall can do it but I can’t??? I don’t have authority to tell the people doing the above to ‘stopit! use the right words!’. But you just did it to me…

If you haven’t already please take a look at my display name.
I’m not trying to change anything. I’m trying to learn.

Why is it a bad approach? I’ve tried other ways of doing this I’m not using for that reason. Like some of them caused a new window to open every time the text was hovered. Can’t have that.

I retired. Websites are a hobby for me not something I’m trying to make a career out of. If it works it’s good. Users that might visit this site aren’t going to be concerned with what a console or the ‘industry standard’ opinion says either. This is for fun and fun only.

JavaScript is the language that powers the web.

Java is a completely separate programming language.

1 Like

https://www.java.com/en/ is why I call all of it “java” without knowing the difference. That’s been around since soon after I started first learning HTML in the 90s. As far as I know “Java” is just that engine that all of the “java” stuff runs on. It’s not a language. This is why I call it that.

I’ll start calling it frizbee. How’s that? Works the same as Modal…

You are welcome to call it frizbee if you’d like, but I doubt anyone will know what you are referring to.

The distinction between Java and JavaScript is important - they are two very different things. I don’t understand the resistance here.

Yeah why can’t someone just answer the question?:
I got this to cause a popup window the way I want it to, how do I get it to close that window?

Code please. I won’t be able to write it from an explanation. I don’t know the terms of whatever language this is. “Search MDN.”? That place is an unsolvable maze for a person like me that doesn’t know what keywords to even search for. I’ve searched ‘onmouseout close javascript’ and ‘onmouseout close jquery’: no relevant results that lead me to being able to get the window to close.

I searched for hours before posting this question trying to figure it out on my own before resorting to asking for help with it.

I meant for it to be lighthearted, not insulting.

JavaScript is the name of the language (or ECMAScript). It would be like you telling me your name is John and I just keep calling you Bob. If your name is John, I should probably call you John and not Bob.

You should share your own code so we know what you have now. Also, we generally do not just post solutions, but instead, we try to help people so they can code it themselves.

But I was curious so I wanted to try it. I’m really not sure how to do it using load as it seems to replace the content even when I use append, so I just used $.get() instead. Both do a GET request anyway (every time you hover it will do a GET request for the page).

GitHub repo with the code:

Live site (because I wanted to make sure it actually worked online)
https://tooltips-loaded-from-html.netlify.app

I didn’t add any comments so here is the JS with some comments.

Code
// event listeners in the JS instead of inline in the HTML
$('.hover').on('mouseover', addTooltip);
$('.hover').on('mouseleave', removeTooltip);

// mouseover handler function
function addTooltip() {
  // if there already is a tooltip return out of the function
  // so we do not add more than one.
  if ($('.tooltip').length > 0) return;

  // "this" is the element that was hovered.
  const hoverTarget = this;
  // get the id from the hovered element.
  const hoverTargetId = hoverTarget.id;

  // get the html file
  $.get('tooltips.html').then((html) => {
    // Use the id of the element that was hovered to select which tooltip text to use.
    // Append the tooltip to the element that was hovered
    $(html).find(`#tooltip-${hoverTargetId}`).appendTo(hoverTarget);
  });
}

// mouseleave handler function
function removeTooltip() {
  // firstElementChild is the tooltip element
  this.firstElementChild.remove();
}

I still think using an object for the tooltips makes a lot more sense than an HTML page.

It is important to read all the text and visit all the links and do what the asker suggest to do on the links they share in order to be able to provide a relevant answer as well as a correct answer.

The time you spent, @lasjorg, is very much appreciated however what you created isn’t even close to relevant to what I’ve asked for help with.

You couldn’t have possibly visited the link I shared in my initial text or did what I suggested on the live, working, real example of what I’m trying to do:

That is the very first sentence in my initial text asking this question. You didn’t even read the first 2 lines. You couldn’t have.

The tool tips aren’t loading text inside a colored div. Look at the examples I shared.

The code does what you asked for, it adds tooltips on hover and the tooltips are coming from an HTML page. It is not meant to be a solution to your specific needs. That you will have to code yourself.

You wasted your time then.
I’m not asking this question to pass one of this site’s curriculum tests.
You didn’t give me an example of any code that does what I asked or exampled.

I tried loading an external file the way I asked with your code example(s):

Result: The code you wrote doesn’t do anything at all. It won’t load an html file as the content of the tooltip.
That is, very clearly, what I explained I’m trying to do.

Your creation loads text from an html file. That’s not what I’m doing. I’m loading a table that has images, text, and that I plan to have other features in such as links to other item pages that IS an html file, not text IN an html file. What you created and suggested doesn’t come anywhere near close to that. You’d know that if you looked at my examples.

I have the window opening the way I want it to. All I want to know is what the code is that closes it. That’s it.

I finally found a solution that works for closing the window.

<div>
  <button id='close'>X</button>
</div>
<script>
window.onload = () => {
  document.getElementById('close').onclick = function() {
    this.parentNode.remove()
    return false;
  };
};
</script>

Placing a close (X) button div in and on each tooltip’s html page.
I’ve positioned the X button in the top right corner using css.

freeCodeCamp isn’t Stack Overflow, we are about teaching and learning. Not just handing out solutions. You know the saying “Teach a man to fish”.

As I said, I did it because of my own curiosity. So no, my time wasn’t wasted just because it didn’t solve your specific needs.

No, it loads an HTML file, finds an element in said file, and appends it to the hovered element. It isn’t just text but HTML elements. I updated the example just to make it more clear.

I also don’t know why you would need to append an entire HTML file?

Good to hear you found a solution. I’m sure it was a greater learning experience and more satisfying coming up with it yourself than just having it handed to you.

I’ve found the 14 characters below can do what I was looking for too. The code below can be placed after onmouseout= or onclick= inside any html tag and it closes the window.

window.close()

<a href="window.close()">X</a>
<button onclick="window.close()">X</button>
<input type="button" onclick="window.close()" value="X"></input>

Hopefully this thread helps someone as quickly as the answer to this question should be in the future.