diff --git a/javascript.html b/javascript.html index ee83242454277bee84879562f219afc4273cabaf..76c9807ebf969022ada07cda64d252325f1ef92d 100644 --- a/javascript.html +++ b/javascript.html @@ -906,8 +906,11 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { </div><!-- /example --> {% highlight html %} <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> + <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> + <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> + <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> {% endhighlight %} @@ -1170,6 +1173,29 @@ $('#myTooltip').on('hidden.bs.tooltip', function () { </button> </div> </div><!-- /example --> +{% highlight html %} +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on left +</button> + +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on top +</button> + +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus +sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on bottom +</button> + +<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + Popover on right +</button> +{% endhighlight %} + + <div class="bs-callout bs-callout-warning"> + <h4>Multiple-line links</h4> + <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p> + </div> <h2 id="popovers-usage">Usage</h2>