Outputting post content to jQuery .html() string

Question

everyone.

I'm trying to create a tooltip that appears over a specific word (an a tag) inside a paragraph, inside a post content that's being displayed on my page. I managed to add a class ("office") to said paragraph from Gutenberg, which I'm using on the front end to target the anchor tag inside it and perform a jQuery .html() to add more content to that a tag (besides the text) which is the tooltip div. The contents of this tooltip div needs to be a specific post's content. Please note that I don't want to add the div in Gutenberg because I want to make this easy for the client too. Basically this is my code:

$(function(){
 $('p.office a').html('hover here <div id="tooltip"><?php echo apply_filters('the_content', get_post_field('post_content', 44)) ?></div>');
});

But when I run that, the console reports an error about syntax and I think this happens because when the function returns the content (with HTML tags) it creates line breaks for every HTML element, not to mention the <-- wp:paragraph --> tags as well. So this messes up with the string to be read by .html().

How would you approach solving this problem, please?

Thanks in advance.

Answer 1

Well, just figured it out by using different search terms: https://stackoverflow.com/questions/10757671/how-to-remove-line-breaks-no-characters-from-the-string

To remove HTML breaks from PHP returns (not actually called "line breaks" because they may get confused with the br tag) you'd have to use something like str_replace() with the \r and \n characters which are PHP breaks. In my case, this is what I did: declared a variable for str_replace() with apply_filters() on the post content I needed:

<?php $content = str_replace(array("\r", "\n"), "", apply_filters('the_content', get_post_field('post_content', 44))); ?>

Then echoed that variable on the code I already had:

$(function(){
 $('p.office a').html('hover here <div id="tooltip"><?php echo $content ?></div>');
});