wordpress double quotes are converting to inverted commas thats why design is breaking

Question

I am wring a wordpress plugin where I have to show some data in bootstrap popover for that I am populating some information in data attributes

it is working on my local server, also it is working on live server if I am rendering my content inside an iframe.

but when I am rendering my HTML inside wordpress content then it is breaking down. below is my code

<?php $iTag = " <i class='float-end btn-popover btn-close'></i>"; ?>
<i class="fa fa-info-circle ms-3 popover-handler no-collapsable" 
         data-bs-title="<?php echo str_replace('"',"'",$item['title']) . $iTag; ?>"
         data-html="true" data-bs-content="<?php echo str_replace('"',"'", stripslashes($item['meta_info'])); ?>"></i>

And below is the output

if you notice data-bs-title value is started with double quotes but ended with inverted commas, actually it is considering data-bs-title value untill next double qoutes which I mard with green.

while debugging I did many things like
I tried removig class attribute from i tag but still it was not fixed
I also tried removing whole i tag than it worked, so it means there is something with <> signs?

Answer 1

WordPress has wptexturize(), which according to their documentation "replaces common plain text characters with formatted entities." (https://developer.wordpress.org/reference/functions/wptexturize/).

This is what is happening in your case. Please look at the "more information" section in the above linked documentation page on how to "get rid" of it.

The most at hand solution would be

add_filter('run_wptexturize', false);

but you might not want to fully deactivate it.

You might want to use shortcodes (their content is not wptexturized) or <script> tags instead.