wordpressadvanced-custom-fieldsbootstrap-5twitter-bootstrap-tooltip

Bootstrap Tooltip cuts of when using single or double quotes


I'm using tooltips from Bootstrap 5 along with Advanced Custom Fields in Wordpress.

I currently have it set up like this.

<button data-bs-toggle="tooltip" data-bs-placement="right" data-html="true" data-bs-sanitize="true" title='<?php if (get_sub_field('desc')): ?><?php the_sub_field('desc'); ?><?php endif; ?>'>tooltip title</button>

The first issue was it would cut off if using double quotes(") but I changed the above code to using single quotes in the title attribute (' '). That now allows double quotes to work but no single quote (apostrophes). Now the text is cut off after the single quotes (apostrophes).

Has anyone found a fix to this? I'm currently using the (`) as a quick fix and it's working but would like to see if there is a better implementation to this?

Thanks in advance!


Solution

  • I think you should use the esc_html function (https://developer.wordpress.org/reference/functions/esc_html/) to output the value for the title attribute.

    That was you would receive in output a string compatible with html

    To verify that your output is the one you intended check the page source code (not inspect, since inspecting does some refactor on the fly for you to see)

    <button data-bs-toggle="tooltip" data-bs-placement="right" data-html="true" data-bs-sanitize="true" title='<?php if (get_sub_field('desc')): ?><?php esc_html(get_sub_field('desc')); ?><?php endif; ?>'>tooltip title</button>