How to change content of popup

[batata004]

Hi,

I have already initialized a popup with $(".popup").popup(); but sometimes I need to change the content of the popup after it's initialized. I tried the code below but does not work:

$(this).popup("change content",'<img id="preview_imagem" src="test.jpg" style="height:180px; width:180px;/>');

Console displays weird errors like:

My code is provided below, and you can run it at http://quemfazsite.com.br/temp/teste.php

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js"></script>



<br><br>
<span id="xxx" style="cursor:pointer; border:1px solid #000; padding:10px;">Hover me twice to start showing popup. Keep doing it.</div>



<script>
$(document).ready(function() {

	$("#xxx").popup();
	
	$("#xxx").on(
	
		"mouseenter",
		function(e) {
			
			$(this).popup("change content",'<img id="preview_imagem" src="test.jpg" style="height:180px; width:180px;/>');			
		
		}
		
	);	
	
});
</script>

So how do I change the content of a popup? The docs at https://fomantic-ui.com/modules/popup.html#/usage says change content(html) but I have no idea how to use it.

[lubber-de]

The change content behavior only changes the content while the popup is being displayed, but does not change it's initial value.
To completely replace the popups content, just reinstantiate it again.

See https://jsfiddle.net/lubber/kqcfgs9t/19/

[batata004]

Wow that a great explanation! I thought that when I changed the content of the popup, even when it's not shown, it would still save the new content. So, in my case, I decided to change the data-content attribute instead of using change content since it works even when the popup is hidden. Thanks again my friend.