bootstrap.popover delay Show and delay Hide value cannot be changed

[samuelagus]

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

[dgrammatiko]

There are no delayShow and delayHide options in the class function params.

joomla-cms/libraries/src/HTML/Helpers/Bootstrap.php

Line 379 in 43293d0

'delay' => isset($options['delay']) ? (int) $options['delay'] : ['show' => 50, 'hide' => 200],

The code above could be changed to accept an array with keys 'hide' and 'show', so the callable will be:

HTMLHelper::_('bootstrap.popover', '.hasTip', ['placement' => 'auto', 'trigger' => 'hover focus', 'customClass' => 'fs-5', 'html' => 'true', 'delay' => ['show' => '200', 'hide' => '500'] ] );

[brianteeman]

unless there is an option for the user to opt not to have automatocally disappearing content it would be an accessibility failure

[dgrammatiko]

@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

[Quy]

Closing as not an issue. Thanks @dgrammatiko

[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)]);
        }