Как добавить всплывающую подсказку в раскрывающемся списке Select2?

Question

У меня есть раскрывающийся список, в котором иногда запись отключена

Я хочу добавить хорошую подсказку на отключенный элемент, чтобы объяснитьПользователь, почему он отключен.

Мой взгляд:

<ul class="dropdown-menu pull-right">
    {% if userCan() and isDiplomaAvailable %}
        <li>
            <a href="{{ path('diploma.download', { 'id': thing.getId(), 'origin': 'internal' }) }}">
                <i class="fa fa-download"></i>
                <span class="hidden-480">Diplôme</span>
            </a>
        </li>
    {% elseif not isDiplomaAvailable %}
        <li
            class="disabled tooltip"
            title="Reason of why the button is disabled"
            >
            <a href="" class="" disabled="disabled">
                <i class="fa fa-download"></i>
                <span class="hidden-480">Diplôme désactivé</span>
            </a>
        </li>
    {% endif %}
    <li>
        <a href="{{ path('attestation.download', { 'id': thing.getId() }) }}">
            <i class="fa fa-download"></i>
            <span class="hidden-480">
                Attestation</span>
        </a></li>
</ul>

Javascript, переключающий подсказку

$('.tooltips').tooltip();

Но когда я это делаю, я ломаю раскрывающееся меню

Кнопка Diplôme désactivé заканчивается сразу после Attestation.

Может кто-нибудь объяснить мне, почему?