有时我会被禁用，

我想在Disabled元素上添加一个很好的工具提示，以向用户解释为什么禁用它。

我的观点：

<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中结束。

有人可以解释我为什么吗？