I'm trying to make it so that a popover does/doesn't appear based on a conditional.
<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()
}
However, on clicking the button the popover comes up briefly before being hidden. Is there any way I can basically prevent the popover from appearing in the first place if the conditional is met or at least make it so that it doesn't flash before it's hidden?
The popover is being shown by Bootstrap due to the data-bs-toggle="popover" attribute. After that gets run, then your hiding code gets run. Hence the brief appearance.
Bootstrap has a "show.bs.popover" event. My guess is if you attach a listener for that event, then preventDefault on the event, that'll stop the popover from showing.
Alternatively, rather than relying on Bootstrap to automatically trigger the popover, you could do it manually - and only manually trigger the popover if the conditions succeed.
