Изменение цвета фона блока заголовка расширенного шаблона веточки

Question

У меня есть шаблон веточки, используемый для всплывающих окон Bootstrap.Код:

span class="popover-wrapper {% block wrapper_class %}{% endblock %}">
  <button
      type="button"
      class="btn-link popover-link {% block link_class %}{% endblock %}"
      tabindex="0"
      role="button"
      data-toggle="popover"
      data-placement="bottom"
      data-title="{% block title %}{% endblock %}"
      >{% block link_text %}{% endblock %}</button>
  <div class="popover-inner-content {% block content_class %}{% endblock %}">
    {% block content %}{% endblock %}
  </div>
</span>

при расширении этого шаблона в другое представление html.twig,

{% embed 'fragments/popover.html.twig' %}
    {% block link_class %}more-sections{% endblock %}
    {% block link_text %}
         <span class="fa fa-info-circle"></span>

    {% endblock %}
    {% block title %}<div>Contact Info</div>{% endblock %}
    {% block content %} .......

При добавлении style="background-color: blue;" к заголовку div он отключает появление / исчезновение всплывающего окнафункциональность.Как я могу изменить цвет фона в разделе заголовка всплывающего окна>

Answer 1

Вы нарушаете HTML, используя двойные кавычки внутри тега заголовка.

<button data-title="<div style="background-color: blue;">Contact Info</div>">...</button>

Вы можете решить эту проблему, используя одинарные кавычки

{% block title %}<div style='background-color: blue;'>Contact Info</div>{% endblock %}