Question

对于Bootstrap来说，我是一个新手，但由于某种原因，我无法获得位于面板内的下面的工具提示，然后在btn-group内工作。

此处的文档 http://getbootstrap.com/javascript/#tooltips-examples

谈论......

“按钮组和输入组中的工具提示需要特殊设置在.btn-group或.input-group中的元素上使用工具提示时，您必须指定选项容器：'body'（下面记录）以避免不必要的副作用（例如元素变宽和/或触发工具提示时失去圆角。“

但我不知道这意味着什么！

我尝试过包含tooltip.js，但这似乎没有任何帮助我。

提前感谢您的帮助！

  <div class="panel panel-default hidden-xs">
                        <div class="panel-body">
                            <div class="col-xs-12 col-sm-9 col-md-9">
                                <h4> Welcome</h4>
                            </div>

                            <div class="col-sm-3 col-md-3 text-right">

                                <div class="btn-group">
                                    <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"><span class="glyphicon glyphicon-align-center"></span></button>
                                    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

这只是为了避免不必要的行为。如果你没有指定容器，工具提示可能只是截止或其他有奇怪的行为。以下是使用代码的示例：

http://www.bootply.com/115182

你必须确保包含代码的jQuery部分，你应该是金色的。

$(document).ready(function() {
            $('#tooltip1').tooltip();
        });

我还在您的html中添加了data-container和id。

<button type="button" id="tooltip1" class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

然后在btn-group中的面板中的Bootstrap工具提示

1 个答案: