1

jquery の Tooltipster プラグインを使用します。

Bootstrap 3 ボタン グループをツールチップのコンテンツとして使用すると、ツールチップの幅が正しく計算されず (数ピクセル)、2 行目に表示されます。

コンテンツはプログラムによって生成されます:

$("<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/

4

1 に答える 1

1

特に Tooltipster の問題ではありません。Bootstrap CSS はbox-sizing属性を次のように設定します。

* { box-sizing: border-box; }

これにより、ツールチップ内のコンテンツが台無しになります。スレッド内の提案を見たことがない場合は、次の CSS「修正」を使用することを推奨するポップアップが表示されます。

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

これで問題が解決しました。これを反映するように JSFiddle を変更しました。最初にフィドルが機能しない場合は、スライダーを動かして「クリック」する必要があります。

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

これが役立つことを願っています！:)

于 2014-04-06T19:42:19.657 に答える