<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;button class=&quot;btn btn-primary btn-lg&quot; data-toggle=&quot;modal tooltip&quot; title=&quot;Tooltip on left&quot; data-target=&quot;#myModal&quot;&gt;
       Launch demo modal
&lt;/button&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-primary btn-lg</span>" <span class="pl-c1">data-toggle</span>="<span class="pl-s">modal tooltip</span>" <span class="pl-c1">title</span>="<span class="pl-s">Tooltip on left</span>" <span class="pl-c1">data-target</span>="<span class="pl-s">#myModal</span>"<span class="pl-kos">&gt;</span>
       Launch demo modal
<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">In the above modal button code, I have included the tooltip code such as<br>
<code class="notranslate">title="Tooltip on left"</code> and <code class="notranslate">data-toggle="tooltip"</code>. Then this modal button does not show tooltip and also not modal.</p>
<p dir="auto">When I remove tooltip from data-toggle, then modal works and when I remove modal from data-toggle, then tooltip works.</p>
<p dir="auto">Please give some solution to deal with this.</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>