I am trying to add a bootstrap popover with html enabled to a Layouts visual editor cell.
The editor converts the ending " in data-content attribute and thus destroys the ending of the popup. Which messes up the following start/end tags on the rest of the page.
This does not happen in views or content templates. Just Layouts visual editor cell.
This works
<a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" data-container="body" data-placement="top auto" title="Plats" data-content="hello"></a>
With this code the ending " in data-content is converted to a ” (curly) which destroys the page html.
<a tabindex="0" class="space-pos-span" role="button" data-toggle="popover" data-trigger="focus" data-html="true" data-container="body" data-placement="top auto" title="Plats" data-content="<p>hello</p>"></a>
If this bug is confirmed it needs a most urgent fix!
(Disable automatic paragraphs is enabled)
Correction. I just created a content template to get around this but it happens there too.
Layouts is a little different than Views Content Templates.
Whenever you save a Layout with some content it applies different filters than Views and will strip some things.
When you save that in a View > Content Template it will work, but the same content template saved in a Layout will get stripped.
What you can try is use the native attribute "data-html="true"".
I mean, bootstrap by default will not allow HTML in the Popover, so that attribute is needed either way, as far I understadn
hidden link
http://stackoverflow.com/questions/13202762/html-inside-twitter-bootstrap-popover
Does that work as expected now?
maybe we misunderstand each other.
I am already using data-html="true"
It is in the code I posted.
That is not the problem.
I have multiple popups with html inside.
The problem is that the Layout visual editor cell AND Views content template converts a double straight " to a right double ” which should never ever happen.
It converts the ending double straight of the data-content attribute if I add html to it.
this converts
data-content="<p>hello</p>"
this does not
This does not happen in my installs.
Please, can you either send me a Snapshot or allow me access to your site?
I think a snapshot would be the best, so I can make tests without any risk to your site.
Here is the information how to send me that:
https://toolset.com/faq/provide-supporters-copy-site/
Have sent you a copy of my site
Here is link to screen cast
hidden link
On a fresh, clean Toolset install this works perfectly fine in a Visual Editor Cell used in Text Mode:
<a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" data-html="true" data-container="body" data-placement="top auto" title="Plats" data-content="hello">Hello</a>
I now saw, the HTML in the data-content attribute seems to screw up things badly.
I apologise I did not see that earlier this way, I could replicate this on a clean install.
But, this does not seem a Toolset problem.
See, please disable all Toolset Plugins, delete them if you want, and activate any Bootstrap Theme.
Then, in the Post Body, insert this code:
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<script>
jQuery(function () {
jQuery('[data-toggle="popover"]').popover()
})
</script>
Works great, right?
Now, head back to the Post Edit Screen and change it slightly to:
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-html="true" data-content="And here's some amazing content. It's very engaging. <strong>Right?</strong>">Click to toggle popover</button>
<script>
jQuery(function () {
jQuery('[data-toggle="popover"]').popover()
})
</script>
As you see, now it's broken.
The Popover does not work anymore and the whole HTML markup of the Button is overlapping the subsequent HTML.
This is a Bootstrap or WordPress BUG, as far I can tell.
Do you agree?
It is not a bootstrap bug, I tried it on a plain bootstrap html page (no wordpress involved).
If it is a wordpress bug or not, I don't know. Don't have a clean install to test on.
(my theme is a bootstrap theme ...)
Toolset is tightly integrated with Bootstrap.
data-html="true" is standard Bootstrap markup so one would expect this to work ...
Can you pass it to the developers, maybe they can do something about it?
We can not fix this, please read my previous post.
It is happening in a normal, clean WordPress install where Toolset is not present at all.
We cannot fix the core of WordPress, unfortunately, this is done by Automattic Developers, not by Toolset Developers.
We can also not modify Bootstrap, as we use the native version.
I confirmed the Bug again on an absolute clean WordPress install using a Bootstrap Theme.
I uploaded the whole site here, you can download it and deploy it locally, it's a simple Duplicator Package:
hidden link
Unfortunately, I cannot do anything here, the issue is not due to Toolset, it's happening in a straight clean WordPress install.
I will inform our Leader about this, maybe we can open a Core Tracker issue, but this is not something we can push, it's not our Software, unfortunately.
I understand.
I suppose that it must be someone somewhere at Automattic that would want to know this.
If your "Leader" has access to some kind of support system it would be great if he/she could pass it on. It needs a fix ?
Posted this ticket, don't know if it does any good
https://core.trac.wordpress.org/ticket/40543#ticket
Thanks, and I apologise.
This is neither a WordPress nor a Toolset Bug.
It depends on the code.
The solution is here:
hidden link
It's from here:
https://wordpress.org/support/topic/bootstrap-native-popup-is-broken-if-it-contains-html/#post-9072961
it also works in Layouts.
Make sure to add the JS to the Toolset > Layouts JS/CSS section and to use jQuery instead of $.
Thank you 🙂 ( I still think it is weird behaviour though...)
