Как можно показать бутстрап-оповещение при наведении курсора на поле выбора в форме django?

У меня есть анкета, основанная на форме django, и мне нужно показать примечание, если пользователь наводит курсор или нажимает на вопрос до того, как он отправит его. Форма django загружается из пользовательской модели вопросов и вариантов вопросов.

Ранее мне уже везло с пользовательским форматированием вопросов, когда я передавал в django форму label и choices в виде mark_safe str с html-форматированием заголовка и опций внутри. В этом случае я сделал еще один шаг вперед и попытался вставить java-скрипт. Однако он ничего не показывает при наведении мыши на выбор. В этом случае answer.content будет индивидуальным выбором под вопросом. Ниже приведен мой код mark_safe, который вызывается только в том случае, если для данного варианта ответа есть пояснительная_заметка, он вызывается непосредственно перед передачей его в поле выбора формы django. Я пробовал разместить его на html-странице, но он не работал, так как не был связан с отдельным вариантом ответа в вопросе. Я подтвердил, что следующая строка правильно передается в форму django и используется в качестве выбора. Он правильно отображает answer.content.

mark_safe("<p id=\"" + str(n) + "\">" + answer.content + "</p> \n"
          "<script>\n"
          "const alert" + str(n) + " = document.getElementById(\'" + str(n) + "\')\n"
          "if (alert" + str(n) + ") {\n"
          "  alert" + str(n) + ".addEventListener(\'mouseover\', () => {\n"
          "    appendAlert(\'" + answer.explanatory_note.text + "\', \'primary\')\n"
          "  })\n"
          "})\n"
          "</script>\n")

Ниже вы также можете увидеть некоторые html-загрузки индивидуальной формы и java-скрипт, который должен создать оповещение.

  <div id="liveAlertPlaceholder"></div>
  <form action="" name='question' id='question' method="POST">
    <div class="card mb-4 mt-4">
      <div class="card-body">
        {% csrf_token %}
        {{ form }}
      </div>
    </div>
    <input class="btn btn-success mb-4" type="submit" value="next" />
  </form>
  <script>
    const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
    const appendAlert = (message, type) => {
      const wrapper = document.createElement('div')
      wrapper.innerHTML = [
        '<div class="alert alert-${type} alert-dismissible" role="alert">',
        '   <div>${message}</div>',
        '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
        '</div>'
      ].join('')

      alertPlaceholder.append(wrapper)
    }
    setTimeout(function() {
        bootstrap.Alert.getOrCreateInstance(document.querySelector(".alert")).close();
    }, 3000)
  </script>

Если есть альтернатива без javascript и/или bootstrap alerts, я бы с удовольствием ее выслушал. Мне просто нужно, чтобы информационная заметка появлялась, когда пользователь наводит курсор или нажимает на выбор.

Вернуться на верх