“BootStrap Tool Tips”的版本间的差异
（创建页面，内容为“ <div class="tooltip-demo"> <div class="bs-example-tooltips"> <div class="btn btn-default" data-toggle="tooltip" data-placement="left" t...”） |
小 |
||
| 第1行： | 第1行： | ||
| + | __NOTOC__ | ||
<div class="tooltip-demo"> | <div class="tooltip-demo"> | ||
<div class="bs-example-tooltips"> | <div class="bs-example-tooltips"> | ||
| 第11行： | 第12行： | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | <div class="tooltip-demo" style="margin-top:2rem;"> | |
| + | <div class="bs-example-tooltips"> | ||
<p>This functionility can also be used in text, hovering over certain | <p>This functionility can also be used in text, hovering over certain | ||
<span class="pointer" data-toggle="tooltip" data-placement="top" title="" | <span class="pointer" data-toggle="tooltip" data-placement="top" title="" | ||
| 第23行： | 第25行： | ||
<span class="pointer" data-toggle="tooltip" data-placement="right" title="" | <span class="pointer" data-toggle="tooltip" data-placement="right" title="" | ||
data-original-title="Tooltip on Right"><strong>right</strong></span>.</p> | data-original-title="Tooltip on Right"><strong>right</strong></span>.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <h4 class="subtitle-black">Using Tooltips</h4> | ||
| + | <p>For button tooltips use;</p> | ||
| + | <pre> | ||
| + | <div class="tooltip-demo"> | ||
| + | <div class="bs-example-tooltips"> | ||
| + | <div class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" | ||
| + | data-original-title="Tooltip on left">Tooltip on left</div> | ||
| + | <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top"> | ||
| + | Tooltip on top</div> | ||
| + | <div class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" | ||
| + | data-original-title="Tooltip on bottom">Tooltip on bottom</div> | ||
| + | <div class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" | ||
| + | data-original-title="Tooltip on right">Tooltip on right</div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </pre> | ||
| + | <p>For text tooltips use;</p> | ||
| + | <pre> | ||
| + | <p>This functionility can also be used in text, hovering over certain | ||
| + | <span class="pointer" data-toggle="tooltip" data-placement="top" title="" | ||
| + | data-original-title="Tooltip on Top"><strong>words</strong></span> will produce the Tool Tip. You can also do | ||
| + | the same | ||
| + | <span class="pointer" data-toggle="tooltip" data-placement="bottom" title="" | ||
| + | data-original-title="Tooltip on Bottom"><strong>underneath</strong></span>. Tool Tips can be also be shown to | ||
| + | the | ||
| + | <span class="pointer" data-toggle="tooltip" data-placement="left" title="" | ||
| + | data-original-title="Tooltip on Left"><strong>left</strong></span>, or to the | ||
| + | <span class="pointer" data-toggle="tooltip" data-placement="right" title="" | ||
| + | data-original-title="Tooltip on Right"><strong>right</strong></span>.</p> | ||
| + | </pre> | ||
2016年12月7日 (三) 10:57的最新版本
Tooltip on left
Tooltip on top
Tooltip on bottom
Tooltip on right
This functionility can also be used in text, hovering over certain words will produce the Tool Tip. You can also do the same underneath. Tool Tips can be also be shown to the left, or to the right.
Using Tooltips
For button tooltips use;
<div class="tooltip-demo">
<div class="bs-example-tooltips">
<div class="btn btn-default" data-toggle="tooltip" data-placement="left" title=""
data-original-title="Tooltip on left">Tooltip on left</div>
<div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
Tooltip on top</div>
<div class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Tooltip on bottom">Tooltip on bottom</div>
<div class="btn btn-default" data-toggle="tooltip" data-placement="right" title=""
data-original-title="Tooltip on right">Tooltip on right</div>
</div>
</div>
For text tooltips use;
<p>This functionility can also be used in text, hovering over certain
<span class="pointer" data-toggle="tooltip" data-placement="top" title=""
data-original-title="Tooltip on Top"><strong>words</strong></span> will produce the Tool Tip. You can also do
the same
<span class="pointer" data-toggle="tooltip" data-placement="bottom" title=""
data-original-title="Tooltip on Bottom"><strong>underneath</strong></span>. Tool Tips can be also be shown to
the
<span class="pointer" data-toggle="tooltip" data-placement="left" title=""
data-original-title="Tooltip on Left"><strong>left</strong></span>, or to the
<span class="pointer" data-toggle="tooltip" data-placement="right" title=""
data-original-title="Tooltip on Right"><strong>right</strong></span>.</p>