<p dir="auto">This may be a bit of an obvious question, but I am not really a javascript man...</p>
<p dir="auto">Anyway, I am using the Collapse plugin for an accordion, but I want to make the toggle links gain a class of "active" when toggled, which the Button plugin does. But I seem to have a choice between using 'data-toggle="collapse"', which makes the accordion work, or using 'data-toggle="button"', which makes the button plugin work, but I can't use both. Is there a way to get the button toggle to work alongside the collapse toggle?</p>
<p dir="auto">Since <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="9489779" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/6380" data-hovercard-type="pull_request" data-hovercard-url="/twbs/bootstrap/pull/6380/hovercard" href="https://github.com/twbs/bootstrap/pull/6380">#6380</a> the recommendation has been to use <code class="notranslate">data-toggle="tooltip"</code> and <code class="notranslate">data-toggle="popover"</code>, alongside the existing <code class="notranslate">data-toggle="modal"</code> and <code class="notranslate">data-toggle="dropdown"</code> attributes, which is a good idea.</p>
<p dir="auto">However, sometimes you might want to show a tooltip on a button which also toggles a modal or a dropdown.</p>
<p dir="auto">It's not possible to use multiple data-toggle attributes on the same node, and <code class="notranslate">[data-toggle=modal]</code> doesn't match <code class="notranslate">data-toggle="tooltip modal"</code>.</p>
<p dir="auto">Possibilities:</p>
<ul dir="auto">
<li>Use the ~= selector, which matches one of a set of space-separated attributes: <code class="notranslate">[data-toggle~=modal]</code></li>
<li>Use separate "data-toggle-tooltip", "data-toggle-popover", "data-toggle-modal", "data-toggle-dropdown" attributes.</li>
</ul>