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:

 $('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.

  • You'll need to run the content through both esc_html() and then a function that will escape that for inclusion in a JavaScript string, but I don't know what that second function is. – Rup Aug 31 '20 at 18:55
  • You could also just write the content to a hidden div on the page and either unhide and position that, or copy the content out of it when you want to display it. – Rup Aug 31 '20 at 18:56
  • Hi, @Rup. Thanks for the reply. I was actually using apply_filters('the_content', get_post_field('post_content', 44)). I combined that with esc_html() and got the same result (syntax error probably because of a line break) now with HTML characters instead of HTML tags. The stripping of HTML tags was expected. – Luiz Cruz Aug 31 '20 at 19:56
  • Yes, it's probably the escaping-for-a-JavaScript-string that's the more important part here. – Rup Aug 31 '20 at 20:02
  • Exactly. It'd have to be inline HTML, without line breaks for the elements. – Luiz Cruz Aug 31 '20 at 20:03

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:

 $('p.office a').html('hover here <div id="tooltip"><?php echo $content ?></div>');
  • 1
    Great! I still think you'll have to worry about single quotes though. – Rup Aug 31 '20 at 23:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.