Сохранение Bootstrap поповера живым при наведении на него - PullRequest
Новая
       35

Сохранение Bootstrap поповера живым при наведении на него

0 голосов
/ 09 марта 2020

Во-первых, я нашел то, что я считаю подходящим решением этой проблемы здесь: Как я могу сохранить Bootstrap popovers живыми, находясь при нахождении?

К сожалению для некоторых Причина Решение, предложенное в этих ответах, похоже, не работает в моем случае, хотя я не уверен в причине этого.

Я пытаюсь изменить реализацию по умолчанию уже существующего элемента popover в среде интернет-магазина, где этот popover уже включен, но без необходимости или функциональности, чтобы поддерживать его активным при наведении курсора на сам popover.

Это соответствующая часть в файлах шаблонов для этого всплывающего окна: 

{assign var=anzeige value=$Einstellungen.artikeldetails.artikel_lagerbestandsanzeige}
{if $anzeige !== 'nichts' && isset($Artikel->oWarenlager_arr) && $Artikel->oWarenlager_arr|@count > 1 && ($Artikel->cLagerBeachten !== 'Y' || $Artikel->cLagerKleinerNull === 'Y' || $Artikel->fLagerbestand > 0 || $Artikel->fZulauf > 0)}
    {if $tplscope === 'detail'}
        <a class="btn-store-availability" data-toggle="popover" data-placement="left" data-ref="#popover-warehouse" >Wo? <i class="fa fa-map-marker" title="{lang key="availability" section="productDetails"}"></i></a>
    {/if}
    <div class="hidden" id="popover-warehouse">
        <table class="table warehouse-table">
        {foreach name=warenlager from=$Artikel->oWarenlager_arr item=oWarenlager}
            <tr>
                <td class="name"><a href="/filialen" target="_blank"><strong>{$oWarenlager->cName}</strong></a></td>
                <td class="delivery-status">
                {if $anzeige !== 'nichts' && $Artikel->cLagerBeachten === 'Y' && ($Artikel->cLagerKleinerNull === 'N' ||
                $Einstellungen.artikeldetails.artikeldetails_lieferantenbestand_anzeigen === 'U') && $oWarenlager->fBestand <= 0 && $oWarenlager->fZulauf > 0 && isset($oWarenlager->dZulaufDatum)}
                    {assign var=cZulauf value=$oWarenlager->fZulauf|cat:':::'|cat:$oWarenlager->dZulaufDatum_de}
                    <span class="signal_image status-1"><span>{lang key="productInflowing" section="productDetails" printf=$cZulauf}</span></span>
                {elseif $anzeige === 'verfuegbarkeit' || $anzeige === 'genau'}
                    <span class="signal_image status-{$oWarenlager->oLageranzeige->nStatus}">{$oWarenlager->oLageranzeige->cLagerhinweis[$anzeige]}</span>
                {elseif $anzeige === 'ampel'}
                    <span><span class="signal_image status-{$oWarenlager->oLageranzeige->nStatus}">{$oWarenlager->oLageranzeige->AmpelText}</span></span>
                {/if}
                </td>
            </tr>
        {/foreach}
        </table>
    </div>
{/if}

Это отображает «Wo?» вместе со значком из шрифта удивительным и при наведении курсора в этом слове всплывающее окно выглядит так, как должно, содержание определяется по элементу с помощью переменных smarty.

Первоначально элемент "a" также содержал параметр 'data-trigger = "click hover"' , который я удалил, поскольку считал, что именно он удерживает добавлено javascript из вышеупомянутого SO ответа от рабочего.

По сути, я добавил этот код, адаптированный из других SO ответов выше в файле шаблона следующим образом: 

<script type='text/javascript'>
{literal}
$('.btn-store-availability').popover({ trigger: 'manual', html: true, animation: false)
    .on('mouseenter', function () {
        var _this = this;
        $(this).popover('show');
        $('.popover').on('mouseleave', function () {
            $(_this).popover('hide');
        });
    }).on('mouseleave', function () {
        var _this = this;
        setTimeout(function () {
            if (!$('.popover:hover').length) {
                $(_this).popover('hide');
            }
        }, 300);
});
{/literal}
</script>

Я также пытался изменить каждое упоминание ". Popover" с "# popover-warehouse" , но безрезультатно. Я также проверил, существует ли уже javascript, который обрабатывает всплывающие окна, которые могут создавать помехи, но после тщательной проверки я не нашел ни одного, поэтому всплывающее окно обрабатывалось непосредственно bootstrap только до того, как я добавил скрипт.

К сожалению, я не знаю, в чем проблема, единственное заметное различие между моим делом и ответами SO , упомянутыми выше, заключается в том, что я не добавляю содержание всплывающее окно со сценарием, но даже когда я изменил его на простую строку "Popover Test" , он просто не отображал всплывающее окно вообще.

Я благодарен за любую помощь или понимание, которое вы можете предложить, и если мне потребуется предоставить более подробную информацию, я был бы рад сделать это. Заранее благодарю за помощь!

С уважением, Eisman333

...