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

Bootstrap Tooltip cuts of when using single or double quotes – WordPress

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!

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    To Display Single quotes ‘ ’ use ‘ ’
    see – https://www.w3.org/wiki/Common_HTML_entities_used_for_typography

    Login or Signup to reply.
  3. 0

    replace every instance of a single quote with ‘ but when I stated this above the string was encoded and replaced the ‘ with an apostrophe.
    (Ampersand+apos+semicolon) In c# we do this with System.Web.HttpUtility.HtmlEncode("You’re string with quotes");but I’m sure other languages have the same toolset with a different name.
    The problem is caused by using characters that have a special meaning to the browser and you need to escape them.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search