Using Bootstrap4 Popovers for select2 fields #248

urzbs · 2023-11-09T08:04:52Z

urzbs
Nov 9, 2023

Goal
I am trying to add a Bootstap 4 Popover into a field that uses the ModelSelect2Widget
So when the field is hovered / focussed the popover will be displayed.

Problem
The popovers for select2 fields are not shown/triggered. (but visible in the html).
by removing {{ form.media.js }} they will be shown, but then i cant use the select2 features.

(Other fields e.g. CharField do work with this popover.)

Code Snippet

forms.py

from django import forms
from django_select2 import forms as s2forms

class UserPicker(s2forms.ModelSelect2Widget):
    search_fields = [
        "first_name__icontains",
        "last_name__icontains",
    ]

class MyForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["user"].widget.attrs.update({
            'data-html': 'true',
            'title': 'my title',
            'data-toggle': 'popover',
            'data-trigger': 'focus hover',
            'data-content': '<h1>Hello World</h1>',
            'data-placement': 'right',
        })

    class Meta:
        model = MyModel
        fields = ("user",  )
        widgets = {
            "user": UserPicker(),
        }

html template:

{% load static %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 4 Popover Example</title>

    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- Select2 CSS -->
    <link rel="stylesheet" href="{% static 'select2/css/select2.css' %}">

    <!-- Add jQuery (required for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- Add Popper.js (required for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

    <!-- Add Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    {{ form|crispy }}
    {{ form.media.js }}
    
    <style>
      .select2-container {
          width: 100% !important;
      }
      .select2-selection {
          height: 40px !important;
          line-height: 40px !important;
      }
    </style>

    <!-- Initialize the popover with JavaScript -->
    <script>
        $(document).ready(function(){
            $('[data-toggle="popover"]').popover();
        });
    </script>
</body>
</html>

codingjoe · 2023-11-09T08:56:27Z

codingjoe
Nov 9, 2023
Maintainer

Hi @urzbs,

Thanks for reaching out. Honestly, I haven't used Bootstrap in a whee bit. However, I presume your issues comes from Select2 injecting custom DOM and hiding the original select-tag. However, you can bind your toggle to the DOM that's been injected. You will have more success though asking the Select2 community for help. This package is merely the Django integration. The JS community is more experienced with those issues.

I hope my direction helps.

Cheers!
Joe

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Using Bootstrap4 Popovers for select2 fields #248

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Using Bootstrap4 Popovers for select2 fields #248

Uh oh!

urzbs Nov 9, 2023

Replies: 1 comment

Uh oh!

codingjoe Nov 9, 2023 Maintainer

urzbs
Nov 9, 2023

codingjoe
Nov 9, 2023
Maintainer