Question 30988 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to add HTML in a tooltip with Bootstrap 4.5?

After browsing through quite a few topics on the web, I’ve come to ask directly because I haven’t found an answer to my question.

On WordPress, I try to embed an HTML image in a tooltip on a link, but the whole HTML code of my page breaks.

In my head, I have the following JS script to activate the tooltips:

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip({
            html: true
        })
    })
</script>

In my WordPress page, I have the following HTML code:

<li><a href="/jeux/tr1/solution/item1/" data-toggle="tooltip" title="<img src='/img/jeux/tr1/solution/001.png' alt=''>">Item 1</a></li>
<li><a href="/jeux/tr1/solution/item2/">Item 2</a></li>
<li><a href="/jeux/tr1/solution/item3/">Item 3</a></li>

And this is what I get:

enter image description here

The end of the code of the first li is not interpreted, and the browser (Firefox in this case) displays Item 2 directly with the bugged Item 1 in the tooltip.

You can take a look directly here: https://www.tombraidercie.com/public-playground/

Do you have any idea?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    OK, I finally found the answer!

    There is a native function (wptexturize) in Wordpress that transforms certain characters into "smart" characters. And a little sentence in their doc explains that the "code within certain HTML blocks are skipped."

    So if you have a Wordpress site and want to embed HTML code in your tooltips, remove this native function by adding this line to your theme's functions.php file.

    remove_filter('the_content', 'wptexturize');

  2. 0

    Do you just need to enable "data-html=true"?

    This is from a current project:

    <button type="button" class="classes" data-toggle="popover" title="Title" data-content="Content <a href='#'>> Link</a>" data-html="true"></button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search