[#43313] - bootstrap.popover delay Show and delay Hide value cannot be changed
- New
- Medium
- Build: 4.4-dev
- # 43313
Steps to reproduce the issue
I'm using bootstrap.popover for my custom component in Joomla 4 to show a popover when hover in a table cell.
This is the code in /tmpl/default.php :
use Joomla\CMS\HTML\HTMLHelper;
HTMLHelper::_('bootstrap.popover', '.hasTip', ['placement' => 'auto', 'trigger' => 'hover focus', 'customClass' => 'fs-5', 'html' => 'true', **'delayShow' => '200', 'delayHide' => '500'** ] );
And the result in the Chrome browser > Elements is like screenshot attached :
{"bootstrap.popover":{".hasTip":{"animation":true,"container":"body","delay":{"show":50,"hide":200},"html":true,"placement":"auto","trigger":"hover focus","offset":[0,10],"boundary":"scrollParent","customClass":"fs-5"}}
If in HTMLHelper I'm using for example: 'delay' => '100' or 'delay' => '250' or 'delay' => '600' (without Show & Hide value), it will do normally as expected: "delay":100 or "delay":250 or "delay":600
But If I'm using for example: 'delayShow' => '150', 'delayHide' => '400', or using other random values, the browser's Elements will show the same: "delay":{"show":50,"hide":200} like screenshot attached, the values won't be changed.
I don't know where the 50 and 200 values come from? Is it possible that it is the default value for delay Show & Hide?
How to change the value of delay show & hide in bootstrap.popover ?
Expected result
If I'm set the delay value in the HTMLHelper 'bootstrap.popover': 'delayShow' => '200', 'delayHide' => '500'
It should change the delay show & delay hide value for bootstrap.popover to: "delay":{"show":200,"hide":500}
And the popover delay behavior will be adjusted according the delay value
Actual result
The delay show & delay hide value for bootstrap.popover not change whatever the value inputted in the HTMLHelper 'bootstrap.popover'.
It always show the delay value: "delay":{"show":50,"hide":200}
System information (as much as possible)
Joomla 4.4.3
PHP 8.3
Additional comments
Votes
joomla-cms-bot
- | Labels |
Added:
No Code Attached Yet
|
||
| Labels |
Added:
Information Required
|
||
unless there is an option for the user to opt not to have automatocally disappearing content it would be an accessibility failure
@brianteeman it's not about auto show/hide but rather what's the delay duration before showing/hidding the popover: https://getbootstrap.com/docs/5.3/components/popovers/#options
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2024-04-26 19:20:54 |
| Closed_By | ⇒ | Quy |
Closing as not an issue. Thanks @dgrammatiko
Closing as not an issue
Hmm, there is an issue, users cannot pass individual values for show/hide. The solution should be something along the lines:
From:
if ($selector !== '') {
// Setup options object
$opt = [
'animation' => isset($options['animation']) ? (bool) $options['animation'] : true,
'container' => isset($options['container']) ? $options['container'] : 'body',
'content' => isset($options['content']) ? $options['content'] : null,
'delay' => isset($options['delay']) ? (int) $options['delay'] : ['show' => 50, 'hide' => 200],
'html' => isset($options['html']) ? (bool) $options['html'] : true,
'placement' => isset($options['placement']) ? $options['placement'] : null,
'selector' => isset($options['selector']) ? $options['selector'] : false,
'template' => isset($options['template']) ? $options['template'] : null,
'title' => isset($options['title']) ? $options['title'] : null,
'trigger' => isset($options['trigger']) ? $options['trigger'] : 'click',
'offset' => isset($options['offset']) ? $options['offset'] : [0, 10],
'fallbackPlacement' => isset($options['fallbackPlacement']) ? $options['fallbackPlacement'] : null,
'boundary' => isset($options['boundary']) ? $options['boundary'] : 'scrollParent',
'customClass' => isset($options['customClass']) ? $options['customClass'] : null,
'sanitize' => isset($options['sanitize']) ? (bool) $options['sanitize'] : null,
'allowList' => isset($options['allowList']) ? $options['allowList'] : null,
];
Factory::getDocument()->addScriptOptions('bootstrap.popover', [$selector => (object) array_filter((array) $opt)]);
}To:
if ($selector !== '') {
// Setup options object
$opt = [
'animation' => isset($options['animation']) ? (bool) $options['animation'] : true,
'container' => isset($options['container']) ? $options['container'] : 'body',
'content' => isset($options['content']) ? $options['content'] : null,
'html' => isset($options['html']) ? (bool) $options['html'] : true,
'placement' => isset($options['placement']) ? $options['placement'] : null,
'selector' => isset($options['selector']) ? $options['selector'] : false,
'template' => isset($options['template']) ? $options['template'] : null,
'title' => isset($options['title']) ? $options['title'] : null,
'trigger' => isset($options['trigger']) ? $options['trigger'] : 'click',
'offset' => isset($options['offset']) ? $options['offset'] : [0, 10],
'fallbackPlacement' => isset($options['fallbackPlacement']) ? $options['fallbackPlacement'] : null,
'boundary' => isset($options['boundary']) ? $options['boundary'] : 'scrollParent',
'customClass' => isset($options['customClass']) ? $options['customClass'] : null,
'sanitize' => isset($options['sanitize']) ? (bool) $options['sanitize'] : null,
'allowList' => isset($options['allowList']) ? $options['allowList'] : null,
];
if (isset($options['delay'])) {
if (is_array($options['delay']) {
$opt['delay'] = [
'show' => isset($options['delay']['show']) ? int $options['delay']['show'] : 50,
'hide' => isset($options['delay']['hide']) ? int $options['delay']['hide'] : 200,
];
} else {
$opt['delay'] = (int) $options['delay'];
}
} else {
$opt['delay'] = ['show' => 50, 'hide' => 200];
}
Factory::getDocument()->addScriptOptions('bootstrap.popover', [$selector => (object) array_filter((array) $opt)]);
}| Status | Closed | ⇒ | New |
| Closed_Date | 2024-04-26 19:20:54 | ⇒ | |
| Closed_By | Quy | ⇒ |
this is an issue, actually. i've been able to reproduce it on a joomla 4.2.8 site. sorry if this is already fixed in joomla 5, havent checked.
I found it because I was following joomla doc in https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4#Tooltip as to how to initialize tooltip with the delay {show,hide} option.
after applying the fix, I was able to insert this initialization in my template, and it works:
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tooltip', '[data-bs-toggle="tooltip"]', ['delay' => ['show' => '400', 'hide' => '800']]);
this fix runs correctly on joomla 4.2.8. :
if ($selector !== '') {
// Setup options object
$opt['animation'] = isset($options['animation']) ? (bool) $options['animation'] : true;
$opt['container'] = isset($options['container']) ? $options['container'] : 'body';
// $opt['delay'] = isset($options['delay']) ? (int) $options['delay'] : 0; THIS LINE REMOVED, since it doesnt accept a delay object with show/hide
$opt['delay'] = isset($options['delay']) ? (int) $options['delay'] : 0;
$opt['delay'] = isset($options['delay']) ? (int) $options['delay'] : 0;
$opt['html'] = isset($options['html']) ? (bool) $options['html'] : true;
$opt['placement'] = isset($options['placement']) ? $options['placement'] : null;
$opt['selector'] = isset($options['selector']) ? $options['selector'] : false;
$opt['template'] = isset($options['template']) ? $options['template'] : null;
$opt['title'] = isset($options['title']) ? $options['title'] : null;
$opt['trigger'] = isset($options['trigger']) ? $options['trigger'] : 'hover focus';
$opt['fallbackPlacement'] = isset($options['fallbackPlacement']) ? $options['fallbackPlacement'] : null;
$opt['boundary'] = isset($options['boundary']) ? $options['boundary'] : 'clippingParents';
$opt['customClass'] = isset($options['customClass']) ? $options['customClass'] : null;
$opt['sanitize'] = isset($options['sanitize']) ? (bool) $options['sanitize'] : true;
$opt['allowList'] = isset($options['allowList']) ? $options['allowList'] : null;
//add new code to evaluate the delay parameter received
if (isset($options['delay'])) {
if (is_array($options['delay'])) {
$opt['delay'] = [
'show' => isset($options['delay']['show']) ? (int)$options['delay']['show'] : 100,
'hide' => isset($options['delay']['hide']) ? (int)$options['delay']['hide'] : 200,
];
} else {
$opt['delay'] = (int) $options['delay'];
}
}
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43313.
| Labels |
Added:
bug
Removed: Information Required |
||
There are no
delayShowanddelayHideoptions in the class function params.joomla-cms/libraries/src/HTML/Helpers/Bootstrap.php
Line 379 in 43293d0
The code above could be changed to accept an array with keys 'hide' and 'show', so the callable will be: