[#35966] - Missing content with inline popovers
- Closed
- 5 Nov 2021
- Medium
- Build: 4.0-dev
- # 35966
I'm experiencing issues with the initialization of popovers for nodes that declare the content as an inline data attribute.
Steps to reproduce the issue
JHtml::_('bootstrap.popover', '#test_popover', [
'trigger' => 'hover focus',
'placement' => 'right',
]);<span class="badge bg-info" id="test_popover" data-content="Content" data-bs-content="Content" title="Title">Popover Test</span>I tried both the data-content and data-bs-content notations.
Expected result
Popovers were working fine in Joomla! 4.0.3 and older versions.
Actual result
The issue started with Joomla! 4.0.4.
System information (as much as possible)
| Information | Value |
|---|---|
| Database Type | mysql |
| Database Version | 10.5.12-MariaDB |
| PHP Version | 7.4.25 |
| Web Server | Apache/2.4.51 (CentOS) |
| WebServer to PHP Interface | fpm-fcgi |
| Joomla! Version | Joomla! 4.0.4 Stable [ Furaha ] 24-October-2021 19:25 GMT |
Additional comments
This is not a CSS issue because the content is never appended to the document in Joomla! 4.0.4.
4.0.3
<div class="popover fade show bs-popover-end" role="tooltip" id="popover404050" style="position: absolute; left: 0px; top: 0px; margin: 0px; right: auto; bottom: auto; transform: translate(168px, 118px);" data-popper-placement="right">
<div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 36px);"></div>
<h3 class="popover-header">Title</h3>
<div class="popover-body">Content</div>
</div>4.0.4
<div class="popover fade show bs-popover-end" role="tooltip" id="popover994705" style="position: absolute; left: 0px; top: 0px; margin: 0px; right: auto; bottom: auto; transform: translate(168px, 144px);" data-popper-placement="right">
<div class="popover-arrow" style="position: absolute; top: 0px; transform: translate(0px, 10px);"></div>
<h3 class="popover-header">Title</h3>
</div>All seems to work as expected when passing the content via PHP to bootstrap.popover helper:
JHtml::_('bootstrap.popover', '#test_popover', [
'title' => 'Title',
'content' => 'Content',
'trigger' => 'hover focus',
'placement' => 'right',
]);In addition, the issue DOES NOT occur when the popover is manually created via Javascript, without specifying the content into the constructor:
<span class="badge bg-info" id="test_popover" data-content="Content" data-bs-content="Content" title="Title">Popover Test</span>(function($) {
$('#test_popover').each(function() {
$(this).popover({
trigger: $(this).data('trigger'),
placement: $(this).data('placement'),
})
})
})(jQuery)I'm aware of the fact that you are slowly abandon popovers, but for the moment our company would prefer not to replace them. So I'm wondering whether I should expect an action from your part, since popover is still available for usage, or if we have to find a workaround by ourselves.
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
The probelem is in your data attributes. Check your last example: data-content="Content" data-bs-content="Content"
The correct attribute is data-bs-content. The other one is ignored in BS5
// My Web Assets $wa = Factory::getApplication()->getDocument()->getWebAssetManager(); $wa->useScript('bootstrap.popover');Prior to Bootstrap 5 the javascript for all the Bootstrap components was loaded on every page. As of Bootstrap 5, that is shipped with Joomla 4, that is no longer the case. Instead you only "load" the required javascript on every page and then optionally load the javascript for a specific Bootstrap component as and when needed.
@brianteeman thanks for the reply. I tried what you suggested but the problem is still there. I would like to remind you that the issue is not related to the missing script, because Bootstrap Popover is correctly loaded inside the page. The issue is due to the behavior of JHtml::_('bootstrap.popover'), which suddenly stopped displaying the content inside the popover starting from Joomla! 4.0.4.
I reported this issue because the same code worked in Joomla! 4.0.3 and all prior versions. Is the usage of bootstrap.popover now discouraged?
The probelem is in your data attributes. Check your last example:
data-content="Content" data-bs-content="Content"The correct attribute is
data-bs-content. The other one is ignored in BS5
@dgrammatiko sure, I already knew that the correct attribute was data-bs-content. I simply mentioned both the attributes to let you understand that I tried all the possibilities. Even with the following code, the content of the popover is still missing.
<span class="badge bg-info" id="test_popover" data-bs-content="Content" title="Title">Popover Test</span>Not sure if this is clear, but the content of the popover is not taken from the inline data-bs-content attribute while rendering through JHtml::_('bootstrap.popover'). Instead, if we invoke the jQuery.fn.popover callback via javascript, the popover content is properly displayed (as in my previous JS example). This means that something with Joomla! 4.0.4 (only this version) and Bootstrap/Popover seems to have changed. I just couldn't figure out what.
These are the changes between 4.0.3 and 4.0.4
4.0.3...4.0.4
@matteo-galletti could you share in a gist the actual PHP file that you're experiencing this?
@dgrammatiko well, it should be pretty easy to replicate the issue, because I simply created an override for the Joomla! Users view, in which I placed the code that I mentioned at the beginning of this issue.
Anyway, here's the GIST:
https://gist.github.com/matteo-galletti/f442b89d17a7e3f14c3fa4a0e1331cce
The code I added is between the lines 28 and 39. All the remaining code is provided by the native Joomla! users (list) view. And here's the relative path of the override I created:
/html/com_users/users/default.php in template Atum
Just to be clear, I tested the issue on a fresh installation of Joomla! 4.0.4. So the issue cannot be caused by any conflicts with third-party plugins.
I just tested it using your code and it worked perfectly
@matteo-galletti please test #35969
@dgrammatiko thanks for creating the pull request. I tested your changes and I confirm that all works as expected after applying the new code.
@matteo-galletti please mark your test in the issues.joomla.org so the PR could be merged (needs 2 human tests)
@dgrammatiko I've just marked the issue on joomla.org as tested successfully.
Does the PR solve this issue so it can be closed?
Yes
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-11-05 20:17:15 |
| Closed_By | ⇒ | richard67 |
Closing as having a pull request.
Prior to Bootstrap 5 the javascript for all the Bootstrap components was loaded on every page. As of Bootstrap 5, that is shipped with Joomla 4, that is no longer the case. Instead you only "load" the required javascript on every page and then optionally load the javascript for a specific Bootstrap component as and when needed.