blocks|key|323110|text|由于工具提示不会自动初始化，因此您可以在初始化工具提示时进行更改。我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323111|$(document).ready(function()+{
++++$('body').tooltip({
++++++++selector:+"[data-tooltip=tooltip]",
++++++++container:+"body"
++++});
});|code-block|syntax|javascript|323112|使用此标记：|323113|<button+type="button"+data-target="#myModal"+data-toggle="modal"+data-tooltip="tooltip"+class="btn+btn-info"+title="Your+tooltip">Text+here</button>|323114|请注意data-tooltip。|offset|length|style|CODE|323115|更新|323116|或者简单地说，|323117|$('[data-tooltip="tooltip"]').tooltip();|323118|entityMap^0|0|0|0|0|3|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:</p>

<pre><code>$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});
</code></pre>

<p>with this markup:</p>

<pre><code>&lt;button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip"&gt;Text here&lt;/button&gt;
</code></pre>

<p>Notice the <code>data-tooltip</code>.</p>

<h2>Update</h2>

<p>Or simply,</p>

<pre><code>$('[data-tooltip="tooltip"]').tooltip();
</code></pre>


blocks|key|323148|text|我设法解决了这个问题，而不需要用下面这段jQuery更改任何标记。我遇到了一个类似的问题，我想要一个按钮上的工具提示，而这个按钮已经使用了数据切换模式。您需要做的就是将标题添加到按钮中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323149|$('[data-toggle="modal"][title]').tooltip();|code-block|syntax|javascript|323150|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.</p>

<pre><code>$('[data-toggle="modal"][title]').tooltip();
</code></pre>


blocks|key|105967|text|还没。然而，有人建议有一天有人添加这个功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|105968|下面的bootstrap+Github问题显示了一个完美的示例，说明了您希望实现的目标。这是可能的，但在这个阶段，如果不编写自己的解决方案代码，这是不可能的。|105969|看看这个。:-)|105970|https://github.com/twitter/bootstrap/issues/7011|offset|length|105971|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@$H|U|I|V|1|W]]|A|$]]|$1|J|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|G]]]]

<p>Not yet. However, it has been suggested that someone add this feature one day.</p>

<p>The following bootstrap Github issue shows a perfect example of what you are wishing for. It is possible- but not without writing your own workaround code at this stage though.</p>

<p>Check it out... :-)</p>

<p><a href="https://github.com/twitter/bootstrap/issues/7011">https://github.com/twitter/bootstrap/issues/7011</a> </p>


blocks|key|106253|text|由于Bootstrap强制您只能通过Javascript初始化工具提示，因此我将data-toggle="tooltip"+(因为它当时没有用)更改为class="bootstrap-tooltip"，并使用此Javascript初始化我的工具提示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|106254|$('.bootstrap-tooltip').tooltip();|code-block|syntax|javascript|106255|因此，我可以自由地使用data-toggle属性来做其他事情(例如data-toggle="button")。|106256|entityMap^0|14|L|23|P|0|0|B|B|X|K|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>Since Bootstrap forces you to initialize tooltips only through Javascript, I changed <code>data-toggle="tooltip"</code> (since it's useless then) to <code>class="bootstrap-tooltip"</code> and used this Javascript to initialize my tooltips:</p>

<pre><code>$('.bootstrap-tooltip').tooltip();
</code></pre>

<p>And so I was free to use the <code>data-toggle</code> attribute for something else (e.g. <code>data-toggle="button"</code>).</p>


blocks|key|106193|text|我使用href加载模式，并将数据切换留给工具提示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|106194|<a+
++++data-toggle="tooltip"
++++data-placement="top"
++++title="My+Tooltip+text!"
++++href="javascript:$('#id').modal('show');"
>
%2B
</a>|code-block|syntax|javascript|106195|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I use href to load the modal and leave data-toggle for the tooltip:</p>

<pre><code>&lt;a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
&gt;
+
&lt;/a&gt;
</code></pre>


blocks|key|106164|text|只是为了补充@Roman+Holzner的答案..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|106165|在我的例子中，我有一个显示工具提示的按钮，它应该保持禁用状态，直到进一步的操作。使用他的方法，即使按钮被禁用，模式也可以工作，因为它的调用在按钮之外-我在Laravel刀片文件中，只是为了清楚:)|106166|<span+data-toggle="modal"+data-target="#confirm-delete"+data-href="{{+$e->id+}}">
++++<button+name="delete"+class="btn+btn-default"+data-toggle="tooltip"+data-placement="bottom"+title="Excluir+Entrada"+disabled>
++++++++<i+class="fa+fa-trash+fa-fw"></i>
++++</button>
</span>|code-block|syntax|javascript|106167|因此，如果您希望仅在按钮处于活动状态时显示模式，则应更改标签的顺序：|106168|<span+data-toggle="tooltip"+data-placement="bottom"+title="Excluir+Entrada"+disabled>
++++<button+name="delete"+class="btn+btn-default"+data-href="{{+$e->id+}}"+data-toggle="modal"+data-target="#confirm-delete"+disabled>
++++++++<i+class="fa+fa-trash+fa-fw"></i>
++++</button>
</span>|106169|如果您想要测试它，请使用JQuery代码更改属性：|106170|$('button[name=delete]').attr('disabled',+false);|106171|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Just for complement @Roman Holzner answer...</p>

<p>In my case, I have a button that shows the tooltip and it should remain disabled until furthermore actions. Using his approach, the modal works even if the button is disabled, because its call is outside the button - I'm in a Laravel blade file, just to be clear :)</p>

<pre><code>&lt;span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e-&gt;id }}"&gt;
    &lt;button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled&gt;
        &lt;i class="fa fa-trash fa-fw"&gt;&lt;/i&gt;
    &lt;/button&gt;
&lt;/span&gt;
</code></pre>

<p>So if you want to show the modal only when the button is active, you should change the order of the tags:</p>

<pre><code>&lt;span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled&gt;
    &lt;button name="delete" class="btn btn-default" data-href="{{ $e-&gt;id }}" data-toggle="modal" data-target="#confirm-delete" disabled&gt;
        &lt;i class="fa fa-trash fa-fw"&gt;&lt;/i&gt;
    &lt;/button&gt;
&lt;/span&gt;
</code></pre>

<p>If you want to test it out, change the attribute with a JQuery code:</p>

<pre><code>$('button[name=delete]').attr('disabled', false);
</code></pre>


blocks|key|323320|text|另一个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323321|++++<a+data-toggle="modal"+data-target="#exampleModalCenter">
++++++<span
++++++++class="tags"
++++++++data-toggle="tooltip"
++++++++data-placement="right"
++++++++title="Tooltip+text"
++++++>
++++++++Text
+++++</span>
+++</a>|code-block|syntax|javascript|323322|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>One more solution:</p>

<pre><code>    &lt;a data-toggle="modal" data-target="#exampleModalCenter"&gt;
      &lt;span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      &gt;
        Text
     &lt;/span&gt;
   &lt;/a&gt;
</code></pre>


blocks|key|106329|text|使用.stretched-link类有一个很好的解决方案。按钮必须具有类.position-relative。下面是一个完整的工作示例：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|106330|工具提示必须添加到按钮，否则其位置将不正确。|106331|​|106332|$('[data-toggle="tooltip"]').tooltip();|code-block|syntax|javascript|106333|/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}|106334|<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<button+class="btn+btn-primary+position-relative"+data-toggle="tooltip"+data-trigger="hover"+data-placement="left"+title="Tooltip+text">
++++<span+class="stretched-link"+data-toggle="modal"+data-target="#exampleModal"></span>
++++Click+Me!
</button>


<div+class="modal+fade"+id="exampleModal"+tabindex="-1"+role="dialog"+aria-labelledby="exampleModalLabel"+aria-hidden="true"><div+class="modal-dialog"+role="document"><div+class="modal-content"><div+class="modal-header"><h5+class="modal-title"+id="exampleModalLabel">Modal+title</h5><button+type="button"+class="close"+data-dismiss="modal"+aria-label="Close"><span+aria-hidden="true">&times;</span></button></div><div+class="modal-body">Modal+body</div></div></div></div>

<script+src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script+src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>|106335|106336|entityMap^0|2|F|10|I|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|12|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|Q|3|R|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|S|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|U|$]]

<p>There is a nice solution using class <code>.stretched-link</code>. Button must have a class <code>.position-relative</code>. Here is a full working example:</p>

<p>Tooltip must be added to the button otherwise its position will be incorrect.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('[data-toggle="tooltip"]').tooltip();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;

&lt;!--BUTTON--&gt;
&lt;button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text"&gt;
    &lt;span class="stretched-link" data-toggle="modal" data-target="#exampleModal"&gt;&lt;/span&gt;
    Click Me!
&lt;/button&gt;

&lt;!--DEMO MODAL--&gt;
&lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;&lt;div class="modal-dialog" role="document"&gt;&lt;div class="modal-content"&gt;&lt;div class="modal-header"&gt;&lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&gt;&lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;div class="modal-body"&gt;Modal body&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"&gt;&lt;/script&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|323428|text|我也试着用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323429|​|323430|<span></span>|code-block|syntax|javascript|323431|323432|但|323433|<a></a>+|323434|对我来说效果很好。|323435|您的位置如下：|323436|323437|<button+type="button"+class="btn+btn-danger"+data-bs-container="body"+data-bs-toggle="popover"+data-bs-placement="bottom"+data-bs-content="Some+word+here">
<a+data-bs-toggle="tooltip"+title="Example">Some+info+here</a>
</button>|323438|323439|更棒的是，尝试用div包住整个按钮(使用popover)：|323440|323441|<div+data-bs-toggle="tooltip"+title="Something">
<button+type="button"+class="btn+btn-danger"+data-bs-container="body"+data-bs-toggle="popover"+data-bs-placement="bottom"+data-bs-content="Some+word+here">
Button+label
</button>
</div>|323442|323443|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|N|3|O|5|6|7|19|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1A|8|@]|9|@]|A|$]]|$1|R|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|U|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1E|8|@]|9|@]|A|$]]|$1|X|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|10|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|12|$]]

<p>I've also tried to use</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;&lt;/span&gt;</code></pre>
</div>
</div>
</p>
<p>but</p>
<pre class="lang-html prettyprint-override"><code>&lt;a&gt;&lt;/a&gt; 
</code></pre>
 worked great for me.
<p>Here you are:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here"&gt;
&lt;a data-bs-toggle="tooltip" title="Example"&gt;Some info here&lt;/a&gt;
&lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p>Even better, try to wrap the entire button (that uses popover) with a div:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-bs-toggle="tooltip" title="Something"&gt;
&lt;button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here"&gt;
Button label
&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|323472|text|HTML+(ejs+dianmic+web+page)：这是所有用户的表列表，从nodejs生成表。NodeJS提供了动态的"<%25=+user.id+%25>“。只需对任何值进行更改，如"54“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|323473|<span+type="button"+data-href='/admin/user/del/<%25=+user.id+%25>'+class="item"+
+data-toggle="modal"+data-target="#confirm_delete">
++++<div+data-toggle="tooltip"+data-placement="top"+title="Delete"+data-+
+++++toggle="modal">
+++++++<i+class="zmdi+zmdi-delete"></i>+
++++</div>
</span>|code-block|syntax|javascript|323474|<div+class="modal+fade"+id="confirm_delete"+tabindex="-1"+role="dialog"+aria-labelledby="staticModalLabel"+aria-hidden="true"
+++++++++data-backdrop="static">
++<div+class="modal-dialog+modal-sm"+role="document">
++++<div+class="modal-content">
++++++<div+class="modal-header">
++++++++<h5+class="modal-title"+id="staticModalLabel">Static+Modal</h5>
++++++++<button+type="button"+class="close"+data-dismiss="modal"+aria-label="Close">+<span+aria-hidden="true">&times;</span>+</button>
++++++</div>
++++++<div+class="modal-body">
++++++++<p>+This+is+a+static+modal,+backdrop+click+will+not+close+it.+</p>
++++++</div>
++++++<div+class="modal-footer">
++++++++<button+type="button"+class="btn+btn-secondary"+data-dismiss="modal">Cancel</button>
++++++++++<form+method="POST"+class="btn-ok">
++++++++++++<input++type="submit"+class="btn+btn-danger"+value="Confirm"></input>
++++++++</form>
++++++</div>
++++</div>
++</div>
</div>
+|323475|JS：|323476|++++$(document).ready(function(){
++++++++$('#confirm_delete').on('show.bs.modal',+function(e)+{
++++++++++++$(this).find('.btn-ok').attr('action',+$(e.relatedTarget).data('href'));
++++++++});
++++});|323477|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>HTML (ejs dianmic web page): this is a table list of all users and from nodejs generate the table. NodeJS provide dinamic &quot;&lt;%= user.id %&gt;&quot;. simply change for any value like &quot;54&quot;</p>
<pre><code>&lt;span type=&quot;button&quot; data-href='/admin/user/del/&lt;%= user.id %&gt;' class=&quot;item&quot; 
 data-toggle=&quot;modal&quot; data-target=&quot;#confirm_delete&quot;&gt;
    &lt;div data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Delete&quot; data- 
     toggle=&quot;modal&quot;&gt;
       &lt;i class=&quot;zmdi zmdi-delete&quot;&gt;&lt;/i&gt; 
    &lt;/div&gt;
&lt;/span&gt;
</code></pre>

<pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;confirm_delete&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;staticModalLabel&quot; aria-hidden=&quot;true&quot;
         data-backdrop=&quot;static&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-sm&quot; role=&quot;document&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;h5 class=&quot;modal-title&quot; id=&quot;staticModalLabel&quot;&gt;Static Modal&lt;/h5&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt; &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt; &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
        &lt;p&gt; This is a static modal, backdrop click will not close it. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
          &lt;form method=&quot;POST&quot; class=&quot;btn-ok&quot;&gt;
            &lt;input  type=&quot;submit&quot; class=&quot;btn btn-danger&quot; value=&quot;Confirm&quot;&gt;&lt;/input&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- end modal static --&gt; 
</code></pre>
<p>JS:</p>
<pre><code>    $(document).ready(function(){
        $('#confirm_delete').on('show.bs.modal', function(e) {
            $(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
        });
    });
</code></pre>


blocks|key|106348|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|106349|<a+data-toggle="tooltip"+data-placement="top"+title="My+Tooltip+text!">%2B</a>|code-block|syntax|javascript|106350|106351|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p></p>

<pre><code>&lt;a data-toggle="tooltip" data-placement="top" title="My Tooltip text!"&gt;+&lt;/a&gt;
</code></pre>

<p></p>


<p>Is there a way to assign more than one event to a bootstrap control via "data-toggle".
For example, lets say I want a button that has a "tooltip" and a "button" toggle assigned 
to it.<br>
Tried data-toggle="tooltip button", but only the tooltip worked.</p>

<p>EDIT:</p>

<p>This is easily "workaroundable" with </p>

<pre><code>$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
</code></pre>


Bootstrap control with multiple "data-toggle"

有没有办法通过“数据切换”将多个事件分配给引导控件。例如，假设我想要一个具有“工具提示”和“按钮”切换的按钮。尝试数据切换=“工具提示按钮”，但只有工具提示有效。编辑：这很容易通过以下命令“解决”$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

问具有多个“数据切换”功能的自举控制
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有多个“数据切换”功能的自举控制EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有多个“数据切换”功能的自举控制
EN