Search code examples
wordpressbootstrap-4tooltip

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?

Solution

  • 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');