Tooltipster窗口不适合所有内容

时间:2014-03-22 02:30:31

标签: javascript twitter-bootstrap-3 tooltipster

我使用Tooltipster插件进行jquery。

当我使用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/

1 个答案:

答案 0 :(得分:1)

使用 Tooltipster并不是特别的问题,Bootstrap CSS设置box-sizing属性如下:

* { box-sizing: border-box; }

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

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

这解决了这个问题,我修改了JSFiddle以反映这一点 - 如果小提琴最初不起作用,请移动滑块并将其“点击”到位:

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

我希望这有帮助! :)