工具提示窗口不适合所有内容

Tooltipster window not fit all content

本文关键字：提示窗口 不适合 工具      更新时间：2023-09-26

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

这不是一个特别的问题与 Tooltipster, Bootstrap CSS设置box-sizing属性如下:

* { box-sizing: border-box; }

这会使工具提示中的内容混乱。如果你还没有看到线程中的建议，建议使用以下CSS"修复":

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

这解决了这个问题，我已经修改了JSFiddle来反映这一点-如果小提琴最初不工作，移动滑动条，它应该"点击"到位:

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

我希望这对你有帮助!:)

相关文章：