Estoy tratando de hacer que un popover aparezca o no aparezca en función de un condicional.
<form class="submit-form" action="{% url 'search' %}" method="post"> {% csrf_token %} <input type="submit" class="show-more-button pop" id="mybtn" style="margin-left: 5px" name="mybtn" value="Search" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus" data-bs-content="Please select one or more ingredient"> </form> $(document).on('click', '#mybtn', function (){ var $btn = $('#mybtn')[0] var $pop = bootstrap.Popover.getInstance($btn) if ($(lst).length > 0) { $pop.hide() }Sin embargo, al hacer clic en el botón, la ventana emergente aparece brevemente antes de ocultarse . ¿Hay alguna manera de que básicamente pueda evitar que aparezca el popover en primer lugar si se cumple el condicional o al menos hacer que no parpadee antes de que se oculte?
Bootstrap muestra el popover debido al atributo data-bs-toggle="popover" . Después de que se ejecuta, se ejecuta su código de ocultación. De ahí la breve aparición.
Bootstrap tiene un evento "show.bs.popover" . Mi conjetura es que si adjunta un detector para ese evento, luego preventDefault el valor predeterminado en el evento, eso evitará que se muestre la ventana emergente.
Alternativamente, en lugar de confiar en Bootstrap para activar automáticamente el popover, puede hacerlo manualmente, y solo activar manualmente el popover si las condiciones son satisfactorias.
