javascript - Tooltipster 窗口不适合所有内容

Question

我为 jquery 使用 Tooltipster 插件。

当我使用 Bootstrap 3 按钮组作为工具提示的内容时，工具提示宽度计算不正确（几个像素）并出现第二行。

以编程方式生成内容：

$("<div/>",{class:"btn-group"}).append(
    $("<button/>",{type:"button",class:"btn btn-default"})
        .append( $("<span/>",{class:"glyphicon glyphicon-fast-backward"}) ),
    $("<button/>",{type:"button",class:"btn btn-default"})
        .append( $("<span/>",{class:"glyphicon glyphicon-chevron-left"}) ),
    $("<button/>",{type:"button",class:"btn btn-default",id: "handler-content"}).text("1"),
    $("<button/>",{type:"button",class:"btn btn-default"})
        .append( $("<span/>",{class:"glyphicon glyphicon-chevron-right"}) ),
    $("<button/>",{type:"button",class:"btn btn-default"})
        .append( $("<span/>",{class:"glyphicon glyphicon-fast-forward"}) )
);

完整情况：http: //jsfiddle.net/YHXB5/1/

Answer 1

这不是 Tooltipster 的具体问题， Bootstrap CSS 将box-sizing属性设置如下：

* { box-sizing: border-box; }

这会弄乱工具提示中的内容。如果您还没有看到线程中的建议，则会弹出使用以下 CSS“修复”的建议：

.tooltipster-base { box-sizing: content-box; }

这解决了这个问题，我已经修改了 JSFiddle 以反映这一点 - 如果小提琴最初不起作用，请移动滑块，它应该“点击”到位：

http://jsfiddle.net/YHXB5/2/

我希望这有帮助！:)